60 pytań rekrutacyjnych z React z krótkimi, rzetelnymi odpowiedziami i kodem: podstawy, hooki, stan, renderowanie i wydajność, wzorce, Server Components i React 19 oraz testowanie. Filtruj według tematu i poziomu.
Te 60 pytań rekrutacyjnych z React obejmuje to, o co najczęściej pytają na rozmowach: JSX, propsy i stan, hooki takie jak useState i useEffect, klucze, renderowanie i memo, kontekst, error boundaries, Server Components i nowości React 19, takie jak useActionState. Każde ma krótką odpowiedź prostymi słowami, wiele z kodem, a pytania możesz filtrować według tematu i poziomu.
Jak podzielono pytania
Użyj filtrów, aby przećwiczyć jeden obszar, otwieraj odpowiedź dopiero po wypowiedzeniu własnej na głos, a przykłady kodu traktuj jako coś, o co rekruter może Cię poprosić do napisania od ręki.
Stan i propsy, hooki (zwłaszcza useEffect i jego tablica zależności), klucze w listach, ponowne renderowanie i memoizacja, kontekst oraz pobieranie danych. Na stanowiskach seniorskich dochodzą profilowanie wydajności, architektura i Server Components.
Coraz mniej. Nowy kod używa komponentów funkcyjnych i hooków. Wciąż warto rozpoznawać metody cyklu życia podczas czytania starszego kodu, a error boundaries nadal pisze się jako klasy.
Buduj małe rzeczy od zera: listę zadań, pole wyszukiwania z pobieraniem z debounce, okno modalne z obsługą focusu. Mów w trakcie kodowania i testuj przypadki brzegowe, takie jak puste listy i błędy.
Coraz częściej, przynajmniej na poziomie ich znajomości: ref jako prop, akcje z useActionState, useOptimistic, API use i Server Components.
Nie czujesz się pewnie z ponownymi renderowaniami? Zobacz, jak są liczone na żywo w
Biblioteką JavaScript do budowania interfejsów użytkownika z komponentów. Opisujesz, jak ekran ma wyglądać dla bieżących danych, a React aktualizuje stronę, gdy dane się zmieniają.
Składnią przypominającą HTML wewnątrz JavaScriptu. Krok budowania zamienia każdy tag w wywołanie funkcji tworzącej element React, więc w nawiasach klamrowych możesz użyć dowolnego wyrażenia JavaScript.
Funkcją, która przyjmuje propsy i zwraca JSX. Nazwy zaczynają się wielką literą, aby React mógł odróżnić je od tagów HTML.
Danymi wejściowymi, które rodzic przekazuje komponentowi dziecku, podobnie jak atrybuty tagu HTML. Komponent nie może zmieniać własnych propsów; otrzymuje nowe, gdy rodzic ponownie się renderuje.
Propsy pochodzą od rodzica i wewnątrz komponentu są tylko do odczytu. Stan należy do samego komponentu i zmienia się w czasie przez swój setter, co wywołuje ponowne renderowanie.
Klucze mówią Reactowi, który element jest którym między renderowaniami, dzięki czemu może zachować właściwy stan i węzeł DOM przy każdym elemencie, gdy lista jest przestawiana, filtrowana lub uzupełniana. Używaj stabilnego id z danych, a nie indeksu tablicy, gdy kolejność może się zmieniać.
Zwykłym JavaScriptem: if przed return, operatorem trójargumentowym wewnątrz JSX lub && dla wariantu pokaż albo nic. Uważaj na && z liczbami: 0 && <X /> wyrenderuje 0.
Opakowaniem, które grupuje kilka elementów bez dodawania węzła DOM. Pisz <>...</> albo <Fragment key={...}>, gdy grupa potrzebuje klucza w liście.
Przekaż funkcję do propsa w camelCase, na przykład onClick. React przekazuje syntetyczne zdarzenie, które zachowuje się jak zdarzenie przeglądarki. Przekazuj samą funkcję, a nie wynik jej wywołania.
Opisem UI w postaci zwykłych obiektów, który React buduje przy każdym renderowaniu. React porównuje nowy opis z poprzednim i nanosi na prawdziwy DOM tylko różnice. To porównanie nazywa się rekoncyliacją.
Daje komponentowi fragment stanu i funkcję do jego aktualizacji. Wywołanie settera planuje ponowne renderowanie z nową wartością; zmienna w bieżącym renderowaniu się nie zmienia.
Gdy następna wartość zależy od poprzedniej, zwłaszcza przy kilku aktualizacjach w jednym zdarzeniu. Każda funkcja aktualizująca otrzymuje najnowszą wartość z kolejki, podczas gdy dwukrotne setCount(count + 1) za każdym razem używa tej samej nieaktualnej wartości count.
Do synchronizacji z czymś spoza Reacta po renderowaniu: subskrypcją, timerem, widżetem spoza Reacta lub żądaniem sieciowym. Tablica zależności mówi, kiedy uruchomić go ponownie, a zwracana funkcja sprząta.
Do obliczania wartości z propsów lub stanu (zamiast tego oblicz je podczas renderowania) ani do reagowania na zdarzenie użytkownika (wykonaj pracę w handlerze zdarzenia). Efekty służą do synchronizacji z zewnętrznymi systemami.
Wywołuj hooki tylko na najwyższym poziomie komponentu lub własnego hooka, nigdy w pętlach, warunkach ani zagnieżdżonych funkcjach, i tylko z funkcji React. React polega na tym, że kolejność wywołań jest taka sama przy każdym renderowaniu.
Do przechowywania wartości, która przetrwa renderowania i nie wywołuje renderowania przy zmianie, na przykład węzła DOM, id timera lub poprzedniej wartości. Odczytujesz i zapisujesz ją przez ref.current.
useMemo zapamiętuje wynik obliczenia; useCallback zapamiętuje funkcję. Oba zwracają to samo, dopóki nie zmieni się zależność, i oba mają znaczenie głównie przy przekazywaniu wartości do zmemoizowanych dzieci.
Sposobem odczytania wartości dostarczonej wyżej w drzewie bez przekazywania propsów przez każdy poziom. Każdy komponent odczytujący kontekst renderuje się ponownie, gdy zmienia się jego wartość.
Gdy kilka wartości zmienia się razem lub następny stan zależy od typu akcji, na przykład w kreatorze formularza lub koszyku. Reducer trzyma wszystkie przejścia w jednej testowalnej funkcji.
Funkcją, której nazwa zaczyna się od use i która wywołuje inne hooki. Współdzieli logikę ze stanem między komponentami; każdy komponent, który ją wywołuje, dostaje własny stan.
Uruchamia się po zmianie DOM przez Reacta, ale zanim przeglądarka namaluje stronę, więc możesz zmierzyć układ i go poprawić bez widocznego migotania. Blokuje malowanie, więc używaj go tylko do tego.
Do generowania unikalnego id, które jest zgodne między renderowaniem na serwerze i u klienta, aby łączyć etykiety, pola i opisy. Nie jest przeznaczony do kluczy list.
Przeniesienie wspólnego stanu do najbliższego wspólnego rodzica komponentów, które go potrzebują, a następnie przekazanie go w dół jako propsy razem z funkcjami do jego zmiany.
React decyduje o ponownym renderowaniu, porównując starą i nową wartość. Mutowanie obiektu lub tablicy w miejscu zachowuje tę samą referencję, więc React może pominąć aktualizację. Zamiast tego utwórz nową kopię.
Pole kontrolowane pobiera wartość ze stanu i zgłasza zmiany przez onChange. Pole niekontrolowane przechowuje własną wartość w DOM, którą odczytujesz przez ref lub przy wysłaniu formularza.
To wartość, którą można obliczyć z istniejących propsów lub stanu, na przykład przefiltrowana lista. Przechowywanie jej osobno oznacza utrzymywanie dwóch kopii w zgodzie; obliczanie jej podczas renderowania nie może się rozjechać.
Przekazywaniem propsów przez komponenty, które ich nie używają, tylko po to, by dotrzeć do głęboko położonego dziecka. Rozwiązania to kompozycja (przekazywanie children), kontekst lub biblioteka stanu dla naprawdę globalnych danych.
Gdy wiele odległych komponentów odczytuje i aktualizuje ten sam stan klienta, a kontekst powoduje zbyt wiele ponownych renderowań, lub gdy potrzebujesz narzędzi takich jak devtools i middleware. Dane z serwera zwykle lepiej obsługuje biblioteka do pobierania danych, która je cache'uje.
We frameworku z Server Components pobieraj na serwerze. Po stronie klienta użyj biblioteki danych lub efektu, który uruchamia żądanie, obsługuje ładowanie i błędy oraz ignoruje wynik, jeśli komponent został odmontowany lub zmieniły się dane wejściowe.
Nie. Aktualizacje są kolejkowane i grupowane; React 18 i nowsze grupują też aktualizacje z timeoutów i promise'ów, nie tylko z handlerów zdarzeń. Nowa wartość pojawia się w następnym renderowaniu.
Zmiana jego stanu, ponowne renderowanie rodzica lub zmiana kontekstu, który odczytuje. Ponowne renderowanie nie zawsze zmienia DOM; React aktualizuje tylko to, co się różni.
Pomija ponowne renderowanie komponentu, gdy jego propsy są płytko równe poprzednim. Opłaca się tylko wtedy, gdy komponent często renderuje się z tymi samymi propsami, a jego renderowanie nie jest tanie.
Opakowaniem działającym tylko w trybie deweloperskim, które wykonuje dodatkowe sprawdzenia: renderuje komponenty i uruchamia efekty dwukrotnie, aby ujawnić efekty uboczne i brakujące sprzątanie. W produkcji nic nie robi.
Nagraj interakcję w React DevTools Profiler na buildzie produkcyjnym, poszukaj komponentów, które renderują się często lub długo, a potem usuń przyczynę: przenieś stan niżej, zastosuj memoizację lub wirtualizuj długie listy.
Sposobem oznaczenia aktualizacji jako niepilnej. React utrzymuje responsywność pola wejściowego i może przerwać wolne renderowanie, a isPending pozwala pokazać, że praca trwa.
Daje Ci kopię wartości, która może pozostawać w tyle podczas ciężkiego renderowania. Pisanie od razu aktualizuje pole, a kosztowna lista renderuje się z odroczoną wartością.
Zwirtualizuj ją: renderuj tylko widoczne wiersze za pomocą biblioteki takiej jak react-window lub TanStack Virtual. Stronicowanie lub doładowywanie przy przewijaniu również ogranicza liczbę węzłów DOM.
Wczytywaniem części aplikacji dopiero wtedy, gdy są potrzebne. React.lazy z dynamicznym importem i fallbackiem Suspense wydziela komponent do osobnego pliku.
Podłączeniem Reacta do HTML wyrenderowanego na serwerze, dzięki czemu istniejące znaczniki stają się interaktywne bez przebudowywania. Jeśli klient wyrenderuje coś innego, React zgłasza niezgodność hydratacji.
Narzędziem działającym podczas budowania, które analizuje komponenty i automatycznie dodaje memoizację, przez co wiele ręcznie pisanych useMemo, useCallback i memo staje się zbędnych. Oczekuje kodu zgodnego z zasadami Reacta.
Budowaniem komponentów przez umieszczanie w nich innych, często przez children lub inne propsy. Komponenty React współdzielą zachowanie przez kompozycję i hooki, a zespół Reacta nie znalazł przypadku, w którym hierarchie dziedziczenia by pomagały.
Wszystkim, co umieścisz między tagiem otwierającym a zamykającym komponentu. Pozwala komponentowi układu lub opakowania renderować treść, o której nic nie wie.
Funkcją, która przyjmuje komponent i zwraca nowy z dodatkowym zachowaniem. Większość zastosowań zastąpiły własne hooki, bo współdzielą logikę bez opakowywania i zmieniania nazw propsów.
Komponentem, który przechwytuje błędy rzucone podczas renderowania jego dzieci i zamiast pustej strony pokazuje fallback. Nadal pisze się go jako klasę z getDerivedStateFromError albo za pomocą małej biblioteki.
Renderowaniem dzieci do innego węzła DOM, na przykład document.body, za pomocą createPortal. Używa się go do okien modalnych i podpowiedzi, które muszą wyjść poza overflow lub kontekst nakładania rodzica.
W React 19 komponenty funkcyjne przyjmują ref jako zwykły prop. We wcześniejszych wersjach owiń dziecko w forwardRef. Użyj useImperativeHandle, aby udostępnić tylko wybrane metody.
Grupą komponentów, które współpracują i dzielą stan przez kontekst, na przykład Tabs z Tabs.List i Tabs.Panel. Użytkownik układa części, a rodzic zarządza logiką.
Komponentami, które działają tylko na serwerze i wysyłają do przeglądarki swój wyrenderowany wynik, a nie kod. Mogą bezpośrednio odczytywać dane; interaktywne części trafiają do Client Components oznaczonych "use client".
Oznacza plik jako początek kodu klienckiego: ten moduł i to, co importuje, jest bundlowane dla przeglądarki i może używać stanu, efektów i handlerów zdarzeń.
Funkcjami async, które działają na serwerze, ale można je wywołać z klienta, najczęściej jako akcję formularza. Traktuj każdą jako publiczny endpoint: waliduj dane wejściowe i sprawdzaj uprawnienia.
Owija funkcję akcji i zwraca jej ostatni wynik, opakowaną akcję do przekazania formularzowi oraz flagę oczekiwania. To sposób React 19 na pokazywanie informacji zwrotnej w formularzu.
API React 19, które odczytuje wartość promise'a lub kontekstu podczas renderowania. W przeciwieństwie do hooków można je wywoływać wewnątrz warunków; z promise'em zawiesza renderowanie, dopóki wartość nie będzie gotowa.
Od razu pokazuje oczekiwany wynik akcji, na przykład nowy komentarz, gdy żądanie wciąż trwa, a potem ustala się na rzeczywistym wyniku, gdy ten wróci.
Komponentem, który pokazuje fallback, dopóki coś w jego wnętrzu nie jest gotowe, na przykład leniwie wczytywany kod lub dane we frameworku, który to obsługuje. Przy renderowaniu na serwerze pozwala dosyłać części strony później w strumieniu.
Wyrenderuj go za pomocą React Testing Library w runnerze testów, takim jak Vitest lub Jest, wchodź z nim w interakcję jak użytkownik (klikanie, pisanie) i sprawdzaj to, co widać, a nie stan wewnętrzny.
Zapytania takie jak getByRole("button", { name: "Save" }) znajdują elementy tak, jak robią to technologie asystujące, więc testy sprawdzają też dostępność UI i przetrwają zmiany w znacznikach.
Dokumentacja Reacta zaleca rozpoczęcie pełnych aplikacji od frameworka takiego jak Next.js lub React Router. Dla aplikacji działającej tylko po stronie klienta popularnym narzędziem do budowania jest Vite.
Używaj semantycznych elementów HTML, dodawaj etykietę do każdego pola, zarządzaj focusem w oknach dialogowych, zapewnij dostęp z klawiatury do wszystkiego, co klikalne, i testuj czytnikiem ekranu oraz automatycznym narzędziem do sprawdzania.
Serwuj prawdziwy HTML dla każdego URL przez renderowanie na serwerze, generowanie statyczne lub prerendering, nadaj każdej trasie własny tytuł i meta opis oraz wymień adresy URL w mapie witryny.
Poprawne klucze w listach, efekty z kompletnymi zależnościami i sprzątaniem, brak stanu, który dałoby się wyliczyć, dostępne znaczniki, stany błędu i ładowania oraz brak sekretów w kodzie klienckim.
Wszystkie
Junior
Mid
Senior
Temat
Poziom
Szukaj
effect, key, memo...
{shown} z {total} pytań
Zacznij za darmo · Bez karty kredytowej