State (useState)

Wat is State?

State is data die kan veranderen in je component. Denk aan: een teller, een toggle, input waardes, of een lijst die groeit.

Waarom is state nodig?

In React refresht je browser niet zoals bij gewone HTML. Als je een waarde verandert (bijvoorbeeld let count = 5), dan zie je dat niet op je scherm!

State zorgt ervoor dat React je component opnieuw rendert wanneer data verandert. Zonder state zie je niks gebeuren.

Wanneer gebruik je State?

Teller die omhoog/omlaag gaat
Modal die open/dicht gaat
Input waardes onthouden
Lijst waar items aan toegevoegd worden
Alles wat op je scherm moet veranderen!

Let op: Een normale variabele werkt NIET in React:

let count = 0;
count = count + 1;  // Verandert wel, maar je ziet het niet!

Je hebt state nodig om React te laten weten: "Hey, render opnieuw!"

useState Hook

Om state te gebruiken, importeer je eerst useState van React:

import { useState } from 'react';

Basis Syntax

const [state, setState] = useState(beginWaarde);

state - De huidige waarde
setState - Functie om de waarde te updaten
beginWaarde - Startwaarde (bijv. 0, "", [])

Eerste Voorbeeld: Counter

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

export default Counter;

Wat gebeurt er?

count start op 0
Bij klik wordt setCount(count + 1) aangeroepen
React re-rendert het component met de nieuwe waarde
De nieuwe waarde verschijnt op het scherm

State Updaten

Directe Update

const [count, setCount] = useState(0);

// Directe waarde
setCount(5);  // count wordt 5

// Berekende waarde
setCount(count + 1);  // count + 1

Update met Functie (beter bij berekeningen)

// Bij meerdere updates achter elkaar:
setCount(prev => prev + 1);  // Gebruik vorige waarde

Belangrijk: State updates zijn asynchroon! De nieuwe waarde is niet meteen beschikbaar.

setCount(count + 1);
console.log(count);  // Oude waarde! Niet de nieuwe.

State Resetten

const [count, setCount] = useState(0);

// Reset naar beginwaarde
<button onClick={() => setCount(0)}>Reset</button>

Praktische Voorbeelden

Toggle (aan/uit)

const Toggle = () => {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <p>Status: {isOn ? 'Aan' : 'Uit'}</p>
      <button onClick={() => setIsOn(!isOn)}>
        Toggle
      </button>
    </div>
  );
};

Input Waarde

const NameInput = () => {
  const [name, setName] = useState('');

  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Typ je naam"
      />
      <p>Hallo, {name}!</p>
    </div>
  );
};

Lijst met Items

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput('');
  };

  return (
    <div>
      <input 
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

Belangrijke Regels

Gebruik ALTIJD setState - Nooit direct count = 5
State is asynchroon - Nieuwe waarde niet meteen beschikbaar
useState bovenaan component - Niet in loops of if-statements
Elk component heeft eigen state - State is lokaal

Veelgemaakte Fouten

Fout - State direct aanpassen:

const [count, setCount] = useState(0);
count = count + 1;  // Werkt niet!

Goed - Gebruik setState:

setCount(count + 1);  // Werkt wel!

Fout - Array direct muteren:

const [items, setItems] = useState([]);
items.push('nieuw');  // Niet doen!

Goed - Maak nieuwe array:

setItems([...items, 'nieuw']);  // Werkt!

Fout - useState in if-statement:

if (iets) {
  const [count, setCount] = useState(0);  // Error!
}

Goed - Bovenaan component:

const Component = () => {
  const [count, setCount] = useState(0);  // Goed!
  // rest van code...
};