React Hooks
State Hookok
useState és useReducer – egyszerű és összetett state kezelés.
State Hookok
A state olyan adat, amit a komponens "megjegyez" renderelések között. Ha változik, a komponens újrarenderelődik.
useState
Mire való?
Egyszerű értékek tárolására és frissítésére egy komponensben.
Mikor használjuk? Amikor egy értéket követni kell (pl. számláló, beviteli mező tartalma, be/ki kapcsoló stálya).
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // kezdőérték: 0
return (
<div>
<p>Kattintások: {count}</p>
<button onClick={() => setCount(count + 1)}>Növel</button>
</div>
);
}💡 Tippek:
- Az első elem a jelenlegi érték, a második a frissítő függvény.
- A frissítő függvényt konvenció szerint
set+ változónévvel szokás elnevezni. - Objektumok esetén az egész objektumot felül kell írni (nem merge-öl automatikusan).
useReducer
Mire való?
Összetettebb state logika kezelésére, ahol több különböző "akció" is módosíthatja az állapotot.
Mikor használjuk?
- Ha a
useStatemár "zsúfolt" lesz (sok összefüggő érték). - Ha a state frissítési logika bonyolult (pl. bevásárlókosár: hozzáad, töröl, módosít).
- Redux-szerű mintát szeretnél helyi szinten.
import { useReducer } from 'react';
// A reducer: megmondja, hogyan változzon az állapot egy akció alapján
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
case 'reset': return { count: 0 };
default: throw new Error('Ismeretlen akció');
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Szám: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
</div>
);
}💡 Tipp: useState vs useReducer – ha az állapotnak 3+ mezője van és ezek összefüggenek, valószínűleg a useReducer a jobb választás.