Pytania rekrutacyjne React z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

React · Junior

1. Czym jest React?

   Poprawna odpowiedź: Biblioteką do budowania interfejsów użytkownika z komponentów

   React odpowiada tylko za UI: opisuje interfejs jako funkcję stanu i wydajnie aktualizuje DOM. Routing, ładowanie danych i resztę dają biblioteki (React Router, TanStack Query) lub frameworki zbudowane na React (Next.js). JSX to rozszerzenie składni JavaScriptu, a nie osobny język.

2. Czym jest wirtualny DOM w React?

   Poprawna odpowiedź: Opisem UI w JS: React porównuje go z poprzednim i nanosi tylko różnicę

   Podczas renderowania komponenty zwracają drzewo elementów React - zwykłych obiektów JS. React porównuje nowe drzewo z poprzednim (rekoncyliacja) i nanosi minimalne zmiany do prawdziwego DOM. To nie jest API przeglądarki ani kopia przeglądarki.

3. W co zamienia się JSX podczas budowania?

   Poprawna odpowiedź: W wywołania funkcji tworzących elementy React (jsx())

   <h1 className="t">Hi</h1> jest kompilowane (przez Babel, SWC, TypeScript) do wywołania w stylu jsx("h1", { className: "t", children: "Hi" }), które zwraca obiekt-opis. Przeglądarki nie rozumieją JSX, a React nie używa innerHTML - dlatego stringi w JSX są automatycznie escapowane.

4. Jak ustawić klasę CSS na elemencie w JSX?

   Poprawna odpowiedź: <div className="box">

   JSX jest bliższy JavaScriptowi, a class to słowo zastrzeżone, więc atrybuty nazywa się jak właściwości DOM: className, htmlFor zamiast for, tabIndex, onClick. Atrybuty data-* i aria-* pisze się jak w HTML.

React · Middle

1. Kiedy React zachowuje stan komponentu między renderami?

   Poprawna odpowiedź: Dopóki ten sam typ komponentu pozostaje na tej samej pozycji

   Stan jest przypisany do pozycji w drzewie UI, a nie do zmiennej. Jeśli w tym samym miejscu wyrenderuje się inny typ (<input> zamiast <textarea>, inny komponent), poddrzewo jest odtwarzane i stan przepada. Dlatego nie wolno deklarować komponentów wewnątrz innych komponentów: każdy render tworzy nowy typ.

2. Jak zresetować stan <EditForm /> przy przejściu do innego użytkownika?

   Poprawna odpowiedź: Przekazać key={userId} - React odtworzy komponent

   Nowy key mówi React, że to inny komponent: stary się odmontowuje razem ze stanem, a nowy montuje. Reset przez efekt działa, ale najpierw renderuje nieaktualne dane, a potem je poprawia - zbędny render i mignięcie. forceUpdate istnieje tylko w klasach i nie resetuje stanu.

3. Co robi React.memo(Component)?

   Poprawna odpowiedź: Pomija render, jeśli propsy są płytko równe poprzednim

   memo porównuje każdy prop przez Object.is. Jeśli wszystkie są równe, ponownie używany jest poprzedni wynik renderu. Zmiany własnego stanu i kontekstu nadal wywołują render. Jako drugi argument można przekazać własną funkcję porównującą.

4. Dlaczego memo nie pomaga <List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />?

   Poprawna odpowiedź: Callback i obiekt stylu są tworzone od nowa przy każdym renderze

   Funkcja inline i literał obiektu to nowe referencje przy każdym renderze, więc płytkie porównanie ich nie przepuści. Ustabilizuj je przez useCallback / useMemo albo wynieś stałe poza komponent. React Compiler robi to automatycznie.

React · Senior

1. Dlaczego cache() z React przydaje się w Server Components?

   Poprawna odpowiedź: Deduplikuje wywołania z tymi samymi argumentami w obrębie jednego żądania

   const getUser = cache(async (id) => db.user.find(id)) - kilka komponentów w jednym renderze serwerowym może wywołać getUser(1), a zapytanie do bazy wykona się raz. Cache żyje tylko w obrębie żądania, więc dane różnych użytkowników się nie mieszają. Cache'owanie między żądaniami w Next.js robi się przez 'use cache'.

2. Czym jest Fiber w React?

   Poprawna odpowiedź: Architekturą reconcilera: renderowanie jest dzielone na przerywalne jednostki pracy

   Fiber (React 16+) przedstawia każdy węzeł drzewa jako obiekt „fiber” z informacją o jego pracy. Pozwala to wstrzymywać, przerywać i priorytetyzować renderowanie oraz ponownie wykorzystywać pracę - to podstawa możliwości współbieżnych (transitions, Suspense). Stary stack reconciler przechodził drzewo rekurencyjnie i nie potrafił się zatrzymać.

3. Czym faza render różni się od fazy commit?

   Poprawna odpowiedź: Render jest przerywalny i może się powtarzać; commit synchronicznie nanosi zmiany do DOM

   W fazie render React wywołuje komponenty i oblicza różnice - może zostać przerwana, odrzucona i uruchomiona ponownie, dlatego render musi być czysty. W fazie commit zmiany są nanoszone do DOM naraz bez przerywania, potem wykonują się efekty layoutu, a po malowaniu - zwykłe efekty.

4. Co renderowanie współbieżne daje użytkownikowi?

   Poprawna odpowiedź: Pilne aktualizacje (wpisywanie) mogą przerwać ciężki niepilny render

   Współbieżność nie oznacza wielowątkowości: JS nadal działa w jednym wątku. React może przygotowywać kilka wersji UI, oddawać sterowanie przeglądarce i przerywać pracę o niższym priorytecie (transitions) dla pilnej. Działa to, gdy używasz startTransition, useDeferredValue i Suspense.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.