← Wszystkie tematy W 100% ogłoszeń · 47 z 47 ogłoszeń frontend React

React

Klocki, które same się przebudowują

React jest w każdym z 47 ogłoszeń. Na rozmowie rzadko pytają „co to komponent”. Częściej pytają, kiedy i dlaczego coś się przerenderowuje i jak to kontrolować.

Przerobione Opanowane 0 z 6 pytań

Ucz się z Claude Wytłumacz od zera Próbna rozmowa Zadanie praktyczne Ściąga na 1 stronę

Co piszą w ogłoszeniach

„Poszukujemy dwóch doświadczonych Front-End Engineerów, którzy chcą rozwijać nowoczesne aplikacje webowe z wykorzystaniem React, TypeScript, Vite oraz AWS Cloudscape.”
Upvanta sp. z o.o. · Front-End Engineer (React / TypeScript / AWS)
„praktyczna znajomość React.js, w tym React Hooks, Custom Hooks, Context API, Vite, Vitest/Jest, React Hook Form oraz Fetch/Axios – minimum 5 lat doświadczenia lub 8 projektów”
Randlab · React Developer – (K/M/N)

Scena pierwsza · stan i re-render

Wieża, która sama się przebudowuje

Aplikacja w Reacie to wieża z klocków. Na dole stoi App, a na nim kolejne klocki. Jeden klocek trzyma pudełko ze stanem, czyli liczbę cukierków. Gdy zmienisz zawartość pudełka, ten klocek i wszystkie klocki stojące na nim budują się od nowa. Potem React porównuje nową wieżę ze starą i zmienia na ekranie tylko to, co naprawdę jest inne.

Nagłówek tytuł="Sklep" rendery: 1 memo: pomijam

Licznik ile={3} rendery: 1

Przycisk onKlik rendery: 1

Koszyk cukierki={3} rendery: 1

App rendery: 1 stan: cukierki = 3

Ekran Sklep Cukierki: 3

React.memo na Nagłówku Stan w Koszyku, nie w App

Kliknij „Daj cukierka” i patrz, które klocki się zatrzęsą.

Zauważ: przebudowało się kilka klocków, ale na ekranie zmieniła się tylko jedna liczba. Render to „narysuj wieżę na kartce”. Commit to „przestaw na stole tylko te klocki, które się różnią”.

Scena druga · klucze w listach

Dzieci w czapkach

W rzędzie stoją dzieci. Każde ma swoją czapkę, czyli własny stan: kliknij dziecko, żeby zmienić mu czapkę. Teraz na początek rzędu wchodzi nowe dziecko. Skąd React ma wiedzieć, które dziecko jest które? Po kluczu, czyli imieniu na plakietce.

key = numer w rzędzie key = imię (id)

Zmień komuś czapkę, a potem dodaj nowe dziecko.

Porównajmy

Ręcznie czy z Reactem?

	Ręcznie · zwykły JS	React
Jak zmieniasz ekran?	Sam przestawiasz każdy klocek.Imperatywnie: `el.textContent = …`, `appendChild`.	Mówisz, jak wieża ma wyglądać. Klocki przestawiają się same.Deklaratywnie: UI = f(stan).
Jak zapomnisz o jednym miejscu?	Jeden klocek pokazuje starą liczbę.Rozjazd stanu i DOM-u.	Nie da się zapomnieć: wszystko rysuje się z tego samego pudełka.Jedno źródło prawdy.
Skąd wie, co zmienić?	Ty pamiętasz.Ręczne śledzenie zmian.	Porównuje nową wieżę ze starą.Reconciliation, porównanie po typie i `key`.
Kiedy klocek się przebudowuje?	Kiedy go dotkniesz.Tylko przy jawnej zmianie.	Gdy zmieni się jego pudełko, przebuduje się rodzic albo zmieni się wspólna skrzynia.setState, re-render rodzica, zmiana wartości Contextu.
Cena	Dużo pisania i łatwo o błąd.Kod rośnie z każdą funkcją.	Czasem przebuduje się za dużo klocków.Pomaga kolokacja stanu, `memo` i profiler.

Pudełko

Zmienisz pudełko ze stanem, a klocek i wszystko, co na nim stoi, zbuduje się od nowa. Trzymaj pudełko jak najwyżej w wieży tylko wtedy, gdy musisz.

Plakietka

Klucz to imię klocka w rzędzie. Numer miejsca to nie imię: gdy ktoś wejdzie na początek, wszyscy dostaną nie swoje czapki.

Sprawdź się

Pytania z rozmów

Najpierw odpowiedz na głos, dopiero potem rozwiń odpowiedź.

Co powoduje ponowny render komponentu i jak to kontrolujesz?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Klocek buduje się od nowa, gdy zmieni się jego pudełko ze stanem, gdy przebuduje się klocek, na którym stoi, albo gdy zmieni się wspólna skrzynia, z której korzysta.

Na rozmowę: Trzy powody: setState w komponencie, re-render rodzica (domyślnie renderują się wszystkie dzieci, nawet z tymi samymi propsami) i zmiana wartości Contextu, którego używa. Kontroluję to przez kolokację stanu (trzymam go jak najniżej), podział komponentów, React.memo ze stabilnymi propsami i dzielenie Contextu. Render to nie to samo co zmiana DOM: React porównuje wynik i commituje tylko różnice.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Jak działa tablica zależności w useEffect i jakie błędy najczęściej przy niej widzisz?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: To lista rzeczy, na które efekt patrzy. Gdy któraś się zmieni, efekt rusza znowu. Jak o czymś zapomnisz, efekt patrzy na stary obrazek.

Na rozmowę: Efekt uruchamia się po renderze, gdy któraś zależność zmieniła się według Object.is. Częste błędy: brak zależności, czyli stale closure ze starymi wartościami; obiekt lub funkcja tworzone w renderze jako zależność, co daje pętlę lub efekt przy każdym renderze; brak cleanupu (subskrypcje, AbortController przy fetchu, race condition). Najlepiej w ogóle unikać efektu, gdy da się coś policzyć w renderze albo zrobić w handlerze zdarzenia.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Kiedy useMemo, useCallback i React.memo pomagają, a kiedy szkodzą?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: memo to tabliczka „nie przebudowuj mnie, jeśli dostaję to samo”. Działa tylko wtedy, gdy rodzic naprawdę daje to samo, a nie nową kopię.

Na rozmowę: React.memo pomija render, gdy propsy są płytko równe. useCallback i useMemo dają stabilne referencje i cache drogich obliczeń. Pomagają przy ciężkich poddrzewach, długich listach i zależnościach efektów. Szkodzą, gdy dokładamy je wszędzie: porównywanie kosztuje, kod jest mniej czytelny, a jeden niestabilny prop (inline obiekt) i tak psuje memo. Najpierw mierzę w Profilerze. React Compiler robi część tej pracy automatycznie.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Po co są klucze (key) w listach i co się stanie, gdy użyjesz indeksu?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Klucz to imię na plakietce. Gdy zamiast imienia dasz numer miejsca w rzędzie, a ktoś wejdzie na początek, wszyscy dostaną nie swoje czapki.

Na rozmowę: Key mówi Reactowi, który element listy jest którym między renderami. Z indeksem przy wstawieniu, usunięciu lub sortowaniu stan lokalny i DOM (inputy, focus, animacje) zostają przy pozycji, a nie przy elemencie, więc dane się mieszają, a wszystkie elementy renderują się na nowo. Używam stabilnego id z danych. Indeks jest OK tylko dla listy statycznej, której nikt nie zmienia. Zmiana key celowo resetuje komponent.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Komponent kontrolowany a niekontrolowany: różnice i kiedy który?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Kontrolowany to zabawka na sznurku: wszystko, co robi, trzymasz w ręce. Niekontrolowany biega sam, a Ty pytasz go, co robi, dopiero kiedy chcesz.

Na rozmowę: Kontrolowany: wartość jest w stanie Reacta (value + onChange), więc łatwo o walidację na żywo i zależne pola, ale każda litera to render. Niekontrolowany: wartość jest w DOM (defaultValue, ref, FormData), jest szybszy i prostszy. React Hook Form opiera się głównie na niekontrolowanych polach. Wybieram kontrolowane, gdy UI zależy od wartości w trakcie pisania.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Co dał React 18/19: concurrent rendering, useTransition, Suspense?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Na rozmowę: 18: concurrent rendering, czyli render, który da się przerwać; automatyczny batching; useTransition i useDeferredValue, żeby oznaczyć mniej pilne aktualizacje i nie blokować wpisywania; Suspense przy ładowaniu i streaming SSR. 19: Actions i useActionState / useFormStatus do formularzy, useOptimistic, hook use() do promise i contextu, ref jako zwykły prop, Server Components stabilne w frameworkach. Do tego React Compiler, który sam dodaje memoizację.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Poziom wyżej

Wersja dla seniora

Tak wyglądają pytania na seniora i leada: nie ma jednej dobrej odpowiedzi, liczy się to, jak ważysz kompromisy i czy mówisz o skali, ryzyku i ludziach.

Przypadek 1

Migracja dużej aplikacji z React 17 na 18/19

Aplikacja ma 400 komponentów, część klasowych, kilka bibliotek nieutrzymywanych od lat i własny system modali. Po próbnym podbiciu do React 18 z createRoot pojawiają się podwójne żądania w dev, migające formularze i błędy w jednej bibliotece drag and drop. Masz zaplanować migrację.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy rozumiesz, co realnie zmienia React 18 (automatic batching, concurrent, StrictMode)
Czy planujesz przyrostowo i z pomiarem
Czy umiesz ocenić zależności zewnętrzne

Odpowiedź seniora

Najpierw audyt zależności: które biblioteki mają wersje zgodne z 18, które trzeba podbić albo zastąpić. Potem podbicie react i react-dom z zachowaniem starego ReactDOM.render (tryb legacy działa w 18), co pozwala wdrożyć wersję bez zmiany zachowania.

Drugi krok to createRoot, czyli automatic batching i concurrent features. Podwójne żądania w dev to StrictMode, który celowo montuje efekty dwa razy i pokazuje efekty bez cleanupu. Naprawiam je (AbortController, flaga ignore, przeniesienie pobierania do TanStack Query), zamiast wyłączać StrictMode. Biblioteki, które czytają DOM w render, zastępuję lub izoluję.

Wdrażam za feature flagą na procent ruchu, mierzę błędy w Sentry i Web Vitals. Komponentów klasowych nie przepisuję hurtem: działają, przepisuję je przy okazji zmian. React 19 (ref jako prop, Actions, use) to osobny etap, gdy zależności go wspierają.

Typowe wpadki

Wyłączenie StrictMode, „bo psuje”
Przepisanie wszystkich klas na hooki w ramach migracji
Big bang bez flagi i bez planu powrotu

Dopytają o

Jak znajdziesz komponenty z efektami bez cleanupu?
Czy useTransition coś wam da? Gdzie konkretnie?
Jak sprawdzisz, że automatic batching nie zmienił logiki?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 2

Wyciek pamięci w SPA otwartej cały dzień

Konsultanci mają panel otwarty po 8 godzin. Po południu przeglądarka zajmuje 2 GB i karta się wywala. Wymuszenie odświeżenia pomaga. Musisz znaleźć i naprawić przyczynę oraz zabezpieczyć się na przyszłość.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy umiesz diagnozować pamięć narzędziami (heap snapshot, allocation timeline)
Czy znasz typowe źródła wycieków w React
Czy proponujesz zabezpieczenie systemowe, nie jednorazową łatkę

Odpowiedź seniora

Diagnoza: w Chrome DevTools robię heap snapshot, wykonuję powtarzalny scenariusz (otwórz i zamknij sprawę 20 razy), drugi snapshot i porównanie. Szukam detached DOM nodes i obiektów, których liczba rośnie liniowo. Retainers pokazują, kto je trzyma.

Typowe źródła: subskrypcje i listenery bez cleanupu w useEffect (window, WebSocket, setInterval), cache bez limitu (Map w module, rosnący store, zapytania bez gcTime), closures trzymające duże dane, biblioteki wykresów niszczone bez destroy(), logowanie obiektów do konsoli. Naprawiam przyczynę i dodaję reguły lint (react-hooks/exhaustive-deps, własne dla addEventListener).

Zabezpieczenie: test E2E w Playwright, który powtarza scenariusz 50 razy i sprawdza performance.memory lub metryki CDP, uruchamiany nocą. W produkcji zbieram measureUserAgentSpecificMemory dla próbki użytkowników.

Typowe wpadki

„Dodajmy automatyczne odświeżanie strony co godzinę”
Zgadywanie bez heap snapshotów
Naprawa jednego listenera bez sprawdzenia, czy problem zniknął

Dopytają o

Czym różni się detached DOM od zwykłego wycieku obiektu?
Jak gcTime w TanStack Query wpływa na pamięć?
Jak odróżnisz wyciek od normalnego wzrostu cache?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 3

Mikrofrontendy z różnymi wersjami Reacta

Firma ma 5 zespołów i shell aplikacji ładujący ich moduły przez Module Federation. Dwa zespoły są na React 17, trzy na 18, jeden chce 19. Pojawiają się błędy „Invalid hook call” i dwa razy załadowany React. Ktoś proponuje zmusić wszystkich do jednej wersji w tym tygodniu.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy rozumiesz singletony i shared w Module Federation
Czy umiesz pogodzić autonomię zespołów ze spójnością platformy
Czy znasz alternatywy dla współdzielenia jednej instancji

Odpowiedź seniora

„Invalid hook call” to zwykle dwie kopie Reacta w jednym drzewie. W Module Federation react i react-dom muszą być shared jako singleton z requiredVersion, a shell powinien dostarczać wersję hosta. Jeśli remote wymaga innej wersji, nie może renderować się w tym samym drzewie Reacta.

Rozwiązanie na teraz: kontrakt platformy, czyli shell określa wspieraną wersję i okno na migrację (np. jeden kwartał). Remote na starszej wersji montuję jako osobny root (własny createRoot w kontenerze DOM, komunikacja przez propsy i zdarzenia, nie przez kontekst), co kosztuje drugi React w bundlu, ale izoluje problem.

Długofalowo: wspólna wersja Reacta jako zależność platformy aktualizowana jednym PR-em w monorepo albo przez Renovate, testy kontraktowe remote'ów i dashboard wersji. Do tego pytanie, czy mikrofrontendy w ogóle są potrzebne, skoro ten sam efekt często daje monorepo z niezależnymi wdrożeniami modułów.

Typowe wpadki

Wymuszenie jednej wersji z dnia na dzień bez planu dla zespołów
Wyłączenie singletona, żeby „działało”
Brak rozmowy o kosztach mikrofrontendów

Dopytają o

Jak współdzielić stan logowania między remote'ami?
Co z wydajnością przy dwóch wersjach Reacta?
Kiedy zrezygnowałbyś z mikrofrontendów?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 4

Lista zgłoszeń, która zacina się przy filtrowaniu

Ekran ma 5 tys. zgłoszeń, pole wyszukiwania i filtry. Wpisywanie jest opóźnione o pół sekundy, bo każda litera filtruje i renderuje całą listę. Zespół dodał debounce 500 ms i użytkownicy narzekają, że wyszukiwarka „nie reaguje”.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz concurrent features (useTransition, useDeferredValue) i ich granice
Czy umiesz połączyć kilka technik zamiast jednej łatki
Czy pamiętasz o odczuciu użytkownika

Odpowiedź seniora

Debounce poprawia liczbę obliczeń, ale psuje odczucie: pole tekstowe musi reagować natychmiast. Rozdzielam pilną aktualizację (wartość inputa) od kosztownej (lista): useDeferredValue na frazie albo startTransition przy zmianie filtra. React renderuje listę w tle i przerywa render, gdy przyjdzie kolejna litera, a input zostaje płynny. isPending pokazuje delikatny wskaźnik.

To nie zastępuje tańszego renderu: wiersze opakowuję w memo ze stabilnymi propsami, a listę wirtualizuję (TanStack Virtual), więc w DOM jest 30 wierszy zamiast 5 tysięcy. Filtrowanie przygotowuję raz (znormalizowany tekst, indeks), żeby nie liczyć toLowerCase dla każdego elementu przy każdej literze.

Jeśli dane rosną do dziesiątek tysięcy, filtrowanie przenoszę na serwer z anulowaniem poprzedniego żądania. Mierzę INP przed i po.

Typowe wpadki

Wydłużenie debounce do 1 sekundy
useTransition jako cudowne rozwiązanie bez wirtualizacji
Memo bez sprawdzenia, czy propsy są stabilne

Dopytają o

Czym różni się useDeferredValue od debounce?
Kiedy przeniósłbyś filtrowanie na serwer?
Jak zmierzysz poprawę u użytkowników?

Zapytaj Claude Rozwiń case Zagraj interviewera