Optymalizacja wydajności React
React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler
1Jaka jest główna rola React.memo?
Jaka jest główna rola React.memo?
Odpowiedź
React.memo to Higher-Order Component, który zapamiętuje wynik renderowania komponentu. Wykonuje płytkie porównanie props i pomija ponowne renderowanie, jeśli props się nie zmieniły. Szczególnie przydatny do optymalizacji kosztownych komponentów potomnych, które często otrzymują te same props.
2Jaka jest główna różnica między useMemo a useCallback?
Jaka jest główna różnica między useMemo a useCallback?
Odpowiedź
useMemo zapamiętuje wynik funkcji (zwróconą wartość), podczas gdy useCallback zapamiętuje samą funkcję. useMemo służy do optymalizacji kosztownych obliczeń, natomiast useCallback służy do stabilizacji referencji funkcji przekazywanych jako props, zapobiegając niepotrzebnym ponownym renderowaniom zapamiętanych komponentów potomnych.
3W jakim przypadku użycie React.memo może być kontrproduktywne?
W jakim przypadku użycie React.memo może być kontrproduktywne?
Odpowiedź
React.memo może być kontrproduktywne na komponentach, które otrzymują różne props przy każdym renderowaniu, ponieważ koszt płytkiego porównania props jest dodawany bez korzyści (komponent i tak zostanie ponownie wyrenderowany). Lepiej zarezerwować React.memo dla komponentów, które często otrzymują te same props i mają kosztowne renderowania.
Dlaczego warto używać useCallback dla funkcji przekazywanej jako prop do komponentu zapamiętanego za pomocą React.memo?
Jaka jest główna zaleta code splitting z React.lazy?
+19 pytań z rozmów
Inne tematy rekrutacyjne React / Next.js
Podstawy JavaScript
Podstawy React
React Hooks
Cykl życia komponentu
React Router
Zarządzanie stanem z Context
Formularze i Controlled Components
Pobieranie danych i API
React Query (TanStack Query)
Styling & CSS-in-JS
Podstawy Next.js
TypeScript z React
Pobieranie danych w Next.js
Server Actions w Next.js
Routing i Nawigacja w Next.js
API Routes w Next.js
Metadata & SEO w Next.js
Middleware i Auth w Next.js
Testowanie React
Zustand State Management
Error Boundaries & Error Handling
Advanced React Patterns
Zaawansowane funkcje Next.js
Wdrożenie i Produkcja Next.js
Architecture & Design Patterns
React Server Components
Internacjonalizacja Next.js
React Bezpieczeństwo & Najlepsze Praktyki
Opanuj React / Next.js na następną rozmowę
Uzyskaj dostęp do wszystkich pytań, flashcards, testów technicznych, ćwiczeń code review i symulatorów rozmów.
Zacznij za darmo