Question 1

Jaka jest główna różnica między let a var?

Accepted Answer

let deklaruje zmienną o zasięgu blokowym, co oznacza, że istnieje ona tylko w bloku, w którym została zdefiniowana (między nawiasami klamrowymi). var ma zasięg funkcyjny, co może powodować nieoczekiwane błędy, ponieważ zmienna jest dostępna w całej funkcji. Domyślne używanie let zapobiega problemom z hoistingiem i wyciekom zmiennych w pętlach lub instrukcjach warunkowych.

Question 2

Czym jest JSX w React?

Accepted Answer

JSX to rozszerzenie składni JavaScript, które pozwala na pisanie znaczników przypominających HTML bezpośrednio w kodzie JavaScript. Jest on przekształcany w wywołania funkcji React.createElement przez Babel podczas kompilacji. Używanie JSX sprawia, że kod jest bardziej czytelny i umożliwia wykrywanie błędów w czasie kompilacji dzięki typowaniu, łącząc moc JavaScript ze znajomą składnią.

Question 3

Czym jest hook useState w React?

Accepted Answer

useState to hook React, który zarządza lokalnym stanem w komponencie funkcyjnym. W przeciwieństwie do zwykłych zmiennych JavaScript, które są resetowane przy każdym renderowaniu, useState zachowuje wartość stanu między kolejnymi renderowaniami. Ten hook zwraca tablicę zawierającą aktualną wartość stanu i funkcję do jej aktualizacji, automatycznie wyzwalając ponowne renderowanie komponentu, gdy stan się zmienia.

Question 4

Czym jest mounting w komponencie React?

Accepted Answer

Mounting to faza, w której komponent jest tworzony i wstawiany do DOM po raz pierwszy. W tej fazie React inicjalizuje state, wykonuje kod konstrukcyjny i przeprowadza pierwsze renderowanie. To idealny moment na wyzwalanie wywołań API lub inicjalizację subskrypcji przez useEffect.

Question 5

Czym jest CSS Module w React?

Accepted Answer

CSS Modules automatycznie generują unikalne nazwy klas, dodając hash do nazwy klasy, co zapobiega konfliktom stylów między komponentami. Każdy plik CSS Module ma własny lokalny scope, w przeciwieństwie do tradycyjnych globalnych arkuszy stylów. Podejście to pozwala pisać modularne style bez ryzyka przypadkowego nadpisania w innych komponentach.

Question 6

Czym jest App Router w Next.js?

Accepted Answer

App Router to nowy system routingu w Next.js 13+ oparty na katalogu app/. Zastępuje Pages Router i wprowadza Server Components domyślnie, współdzielone layouty i bardziej elastyczny model routingu z konwencjami plików, takimi jak page.tsx, layout.tsx i loading.tsx.

Question 7

Jaka jest poprawna składnia do typowania props komponentu React?

Accepted Answer

Interfejs Props, po którym następuje typowanie funkcji z Props jako parametrem, to zalecana standardowa składnia. To podejście zapewnia doskonałe wnioskowanie typów i umożliwia łatwe ponowne użycie typu Props w innych miejscach kodu. Jest bardziej jawny niż React.FC i zapewnia lepszą kontrolę nad typowaniem children.

Question 8

Jaka jest główna rola React.memo?

Accepted Answer

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.

Question 9

Czym jest Error Boundary w React?

Accepted Answer

Error Boundary to komponent klasowy React, który przechwytuje błędy JavaScript występujące w drzewie komponentów potomnych, wyświetla zastępczy UI (fallback) i zapobiega awarii całej aplikacji. Wykorzystuje metody componentDidCatch() i getDerivedStateFromError() do przechwytywania i obsługi błędów renderowania.

Question 10

Czym jest wzorzec Compound Components?

Accepted Answer

Wzorzec Compound Components umożliwia tworzenie komponentów, które dzielą niejawny stan przez React Context, bez jawnego przekazywania props. Wzorzec ten jest używany w bibliotekach takich jak Radix UI i Headless UI, aby zapewnić elastyczne i kompozycyjne API. Komponenty podrzędne mogą automatycznie uzyskiwać dostęp do współdzielonego stanu, umożliwiając dostosowanie struktury bez utraty wspólnej logiki.

Pytania z rozmów o React / Next.js

Gotowy na rozmowę o React / Next.js?

Odkryj wszystkie tematy 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

Optymalizacja wydajności React

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ę