Frontend

Jakie statyczne metody Promise znasz? Opowiedz o nich.

Middle+

IT One

Napisz funkcję getUserProfile, która przyjmuje userId jako argument i pobiera profil użytkownika z punktu końcowego API "[link] Funkcja powinna zalogować profil użytkownika, jeśli pobieranie powiedzie się, i zalogować komunikat o błędzie, jeśli pobieranie się nie powiedzie.

Middle+

IT One

import React, { useState, useEffect, useLayoutEffect } from 'react'; export default () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("każde renderowanie 1")); console.log("każde renderowanie 2"); useEffect(() => console.log("każde renderowanie 3")); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Zwiększ </button> ); } // montaż -> każde renderowanie 2, każde renderowanie 1, każde renderowanie 3 // aktualizacja -> każde renderowanie 2, każde renderowanie 1, każde renderowanie 3 // odmontowanie 4

Middle+

IT One

Czym jest Set? Co możemy przekazać jako argument, wywołując new Set?

Middle+

IT One

const S = { id: 1, name: "Ivan", age: "39", tel: [phone] }; function getParam(obj, key) { return obj[key]; } getParam(S, "tel"); getParam(S, "job");

Middle+

IT One

Czy let i const (hoisting) są podnoszone? Co się dzieje, gdy odwołujemy się do nich przed deklaracją?

Middle+

IT One

Napisz abstrakcyjną implementację komponentu Child z memoizacją przez React.memo. Jaki jest drugi argument, który przyjmuje React.memo?

Middle+

IT One

Napisz, co się stanie podczas pierwszego renderowania — w jakiej kolejności wyświetlą się console.log. Co się stanie po kliknięciu?

Middle+

IT One

Czym jest WeakSet?

Middle+

IT One

import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; const someFunc = (arr) => { return [...arr].sort((a, b) => a - b); }; const LazyInit = (props) => { const [arr, setArr] = useState(() => someFunc(props.arr)); const onClick = () => { setArr((prev) => prev.concat(prev.length + 1)); }; return ( <> <button onClick={onClick}> Increment </button> <ul> {arr.map((n, index) => <li key={index}>{n}</li>)} </ul> </> ); }; export default () => <LazyInit arr={[1, 2, 3]} />; --- Na prawej stronie omawia się: - Użycie TypeScript z generykami: "<T extends object, K extends keyof T>" - Sprawdzanie, czy dane są stringiem, za pomocą strażnika typu: "isString(data: unknown): data is string { ... }" - Użycie useState z funkcją, aby uniknąć ponownego uruchomienia przy każdym renderze: ``` const [state, setState] = useState(getComplexData); // lub const [state, setState] = useState(() => getComplexData()); ``` - Funkcja przekazana do useState będzie uruchomiona tylko raz podczas montowania komponentu. - Ostrzeżenie o bezpośredniej mutacji stanu w linii 11 z prev.concat. --- Zadanie techniczne polega na analizie i ewentualnym naprawieniu lub optymalizacji kodu komponentu React, ze szczególnym naciskiem na: - Prawidłową leniwą inicjalizację stanu za pomocą useState. - Unikanie bezpośredniej mutacji stanu. - Zrozumienie generyków TypeScript i strażników typu. - Zapewnienie, że komponent poprawnie aktualizuje stan po kliknięciu przycisku.

Middle+

IT One

Czym jest zamknięcie?

Middle+

IT One

Istnieją trzy źródła danych zwracające te same informacje. Jak uzyskać odpowiedź od najszybszego?

Middle+

IT One

Jaka jest różnica między Map a WeakMap?

Middle+

IT One

Opowiedz o hooku useState w React.

Middle+

IT One

Dlaczego nie można używać funkcji strzałkowych z konstruktorem new?

Middle+

IT One

Jak tworzone są funkcje w JavaScript? Jakie są sposoby tworzenia funkcji i czym się różnią?

Middle+

IT One

Jakie utilitarne typy TypeScript używasz w pracy? Opowiedz o Record, Pick, Omit, Partial, Required, Parameters, Exclude, Extract.

Middle+

IT One