React Hooks
Összefoglaló táblázat
Gyors áttekintés minden hookról és hasznos linkek.
Összefoglaló táblázat
| Hook | Kategória | Mire való? | Mikor használjuk? | Milyen gyakran? |
|---|---|---|---|---|
useState | State | Egyszerű érték tárolás | Számláló, input, toggle, bármilyen lokális adat | ⭐⭐⭐ Nagyon gyakran |
useReducer | State | Összetett state logika | Több összefüggő érték, Redux-szerű minta | ⭐⭐ Gyakran |
useContext | Context | Globális adat olvasása | Téma, auth user, nyelv | ⭐⭐ Gyakran |
useRef | Ref | DOM hozzáférés, nem-renderelő adat | Input fókusz, timer ID, előző érték | ⭐⭐⭐ Nagyon gyakran |
useImperativeHandle | Ref | Ref API testreszabása | Custom komponens metódus exponálás | ⭐ Ritkán |
useEffect | Effect | Mellékhatások (side effects) | API hívás, event listener, timer | ⭐⭐⭐ Nagyon gyakran |
useLayoutEffect | Effect | DOM méret/pozíció mérés | Villódzásmentes DOM manipuláció | ⭐ Ritkán |
useInsertionEffect | Effect | CSS-in-JS library belső logika | Csak library fejlesztők számára | ⭐ Nagyon ritkán |
useEffectEvent | Effect | Effect-en belüli "esemény" | Ha egy érték kell az effectben, de nem dependency | ⭐ Ritkán |
useMemo | Performancia | Drága számítás cachelése | Nagy lista szűrés/rendezés, referencia stabilitás | ⭐⭐ Mértékkel |
useCallback | Performancia | Függvény referencia cachelése | memo-val védett child, effect dependency | ⭐⭐ Mértékkel |
useTransition | Transition | Nem blokkoló state frissítés | Lassú lista szűrés, tab váltás | ⭐⭐ Növekvő |
useDeferredValue | Transition | Props érték késleltetése | Keresés közbeni lassú renderelés | ⭐⭐ Növekvő |
useId | Egyéb | Egyedi, stabil ID generálás | Accessibility (label-input), SSR | ⭐⭐ Általános |
useDebugValue | Egyéb | DevTools label | Custom hook debuggolása | ⭐ Ritkán |
useSyncExternalStore | Egyéb | Külső store feliratkozás | Library fejlesztés, böngésző API figyelés | ⭐ Ritkán |
useOptimistic | Egyéb (React 19) | Optimista UI frissítés | Like, komment, kosár azonnali visszajelzés | ⭐⭐ Növekvő |
useActionState | Egyéb (React 19) | Form action kezelés | Server Actions, form submission | ⭐⭐ Növekvő |
useFormStatus | React DOM | Form küldési állapot | Submit gomb disable, loading UI | ⭐⭐ Növekvő |
Hasznos linkek
Utoljára frissítve: 2025 március – React 19 alapján