State, derivare și reducer

Ce este state

State = memoria unei componente: date care se schimbă în timp, din cauza interacțiunii (un input, un toggle, un contor). Când state-ul se schimbă, React re-randează componenta cu noua valoare.

De ce nu o variabilă simplă? O variabilă locală (let count = 0) se resetează la fiecare randare și schimbarea ei nu declanșează nicio actualizare a ecranului.

const [count, setCount] = useState(0)

Props vs state

Cum funcționează setter-ul

setCount(count + 1)        // valoare nouă
setCount(c => c + 1)       // updater — primește valoarea cea mai recentă

• Setter-ul nu schimbă variabila imediat; programează o randare nouă. console.log(count) imediat după arată valoarea veche.
• React grupează mai multe setări (batching) într-o singură randare.
• Când noua valoare depinde de cea veche → updater function: setCount(c => c + 1) de 3 ori dă +3; setCount(count + 1) de 3 ori dă +1.

State-ul e imutabil

React compară state-ul vechi cu cel nou prin referință. Obiectele și array-urile le înlocuiești, nu le modifici — vezi Referințe și imutabilitate.

setUser({ ...user, name })                       // ✓
setTodos(todos => [...todos, newTodo])           // ✓
user.name = name; setUser(user)                  // ✗ aceeași referință → nicio re-randare

State derivat — nu-l stoca

Dacă o valoare se poate calcula din props sau state, calculeaz-o la randare. Nu o ține în alt useState.

// ✗ două surse de adevăr + un efect care le sincronizează
const [todos, setTodos] = useState([])
const [doneCount, setDoneCount] = useState(0)

// ✓ o singură sursă, restul derivat
const doneCount = todos.filter(t => t.done).length

Calcule chiar costisitoare → useMemo (sau React Compiler, care memoizează automat).

Unde ține state-ul — tipuri și când

Regula: cât mai jos posibil, ridici doar când e nevoie.

useReducer — când logica crește

Când un state are multe moduri de a se schimba, centralizezi logica într-un reducer — o funcție pură (state, action) => newState:

function todosReducer(state, action) {
  switch (action.type) {
    case 'add': return [...state, action.todo]
    case 'toggle': return state.map(t => (t.id === action.id ? { ...t, done: !t.done } : t))
    case 'remove': return state.filter(t => t.id !== action.id)
    default: return state
  }
}

const [todos, dispatch] = useReducer(todosReducer, [])
dispatch({ type: 'add', todo })

Pe scurt

• State = memoria componentei; setter-ul cere o re-randare.
• Updater function când depinzi de valoarea veche; mereu obiecte noi.
• Derivă ce poți calcula; ține state-ul cât mai jos; URL pentru ce trebuie partajat.

Surse oficiale

• react.dev — State: A Component's Memory
• react.dev — Choosing the State Structure
• react.dev — Sharing State Between Components
• react.dev — Extracting State Logic into a Reducer