Waarvoor wordt de useState-directive gebruikt?

useState is een React-hook waarmee je toestand kunt toevoegen aan functionele componenten. Het retourneert een array met twee elementen: de huidige waarde van de toestand en een functie om deze bij te werken. Wanneer de updatefunctie wordt aangeroepen, wordt de component opnieuw gerenderd met de nieuwe waarde.

Voorbeeld van gebruik:

import { useState } from 'react';

function Counter() {
  // 'count' is de huidige toestand, 'setCount' is de functie om deze bij te werken
  const [count, setCount] = useState(0);

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

Belangrijkste kenmerken:

• Voegt toestand toe: Hiermee kun je toestand gebruiken in functionele componenten, voorheen alleen in klassen.
• Updatefunctie: Geeft een speciale functie terug om de toestand te wijzigen.
• Her-renderen: Het wijzigen van de toestand via de updatefunctie zorgt voor een her-render van de component.
• Primitieven en objecten: Kan alle datatypes opslaan: getallen, strings, booleans, objecten, arrays.
• Lui initialiseren: De beginwaarde kan een functie zijn die alleen wordt uitgevoerd bij de eerste render, handig voor dure berekeningen.

const [data, setData] = useState(() => {
  // Dure berekeningen worden slechts één keer uitgevoerd
  const initialData = someExpensiveCalculation();
  return initialData;
});