Hoe verander je de staat van componenten correct in…

Veranderingen in de staat van React gebeuren via de setState-methode voor klassecomponenten of met behulp van de useState-hook voor functionele componenten.

Klassecomponenten:

// Importeer React
import React, { Component } from 'react';

// Maak een klassecomponent
class MyComponent extends Component {
  // Initialiseer de staat
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Methode om de staat te wijzigen
  incrementCount = () => {
    // Gebruik setState
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Tel: {this.state.count}</p>
        <button onClick={this.incrementCount}>Verhoog</button>
      </div>
    );
  }
}

// Exporteer de component
export default MyComponent;

setState is asynchroon.
setState voegt de nieuwe staat samen met de huidige (shallow merge).
setState kan een functie accepteren die de nieuwe staat teruggeeft, gebaseerd op de vorige:

// Methode om de staat te wijzigen met behulp van een functie
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Functionele componenten (met useState):

// Importeer React en useState
import React, { useState } from 'react';

// Maak een functionele component
function MyFunctionComponent() {
  // Initialiseer de staat met useState
  const [count, setCount] = useState(0); // [huidige staat, functie om bij te werken]

  // Functie om de staat te wijzigen
  const incrementCount = () => {
    // Gebruik een functie om de staat bij te werken
    setCount(count + 1);
  };

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

// Exporteer de component
export default MyFunctionComponent;

useState geeft een array van twee elementen: de huidige staat en de functie om deze bij te werken.
De bijwerkingsfunctie, teruggegeven door useState, vervangt de huidige staat, in plaats van deze te combineren.
Je kunt een functie doorgeven aan de update-functie als de nieuwe staat afhangt van de vorige:

// Functie om de staat te wijzigen met behulp van een functie
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Belangrijke punten bij het wijzigen van de staat:

Wijzig de staat niet direct: Ken nooit een nieuwe waarde toe aan de state-eigenschap (bijvoorbeeld this.state.count = 5 of count = 5). React detecteert deze wijziging niet en de component wordt niet opnieuw gerenderd.
Objecten en arrays wijzigen: Bij het wijzigen van objecten of arrays in de staat, maak altijd nieuwe kopieën. React vergelijkt de referenties en als de referentie niet verandert, gaat React ervan uit dat de gegevens niet zijn gewijzigd en wordt er niet gerenderd.

// Wijzigen van een object in een klassecomponent
this.setState(prevState => ({
  user: {
    ...prevState.user, // Oude eigenschappen kopiëren
    name: 'Nieuwenaam' // Eigenschap bijwerken
  }
}));

// Wijzigen van een array in een functionele component
setItems(prevItems => [...prevItems, 'Nieuw element']); // Voeg een nieuw element toe

Asynchroniciteit van setState: Als je iets wilt uitvoeren nadat de staat is bijgewerkt en de component opnieuw is gerenderd, gebruik dan de tweede argument van setState (een callback-functie) of de useEffect-hook in functionele componenten.

// Callback in setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Staat bijgewerkt!');
});

// useEffect voor reageren op verandering in de staat
useEffect(() => {
  console.log('De staat count is gewijzigd:', count);
}, [count]); // Afhankelijkheid: hook wordt getriggerd bij verandering van count

Vergelijking van methoden:

Kenmerk	Klassecomponent (`setState`)	Functionele component (`useState`)
Syntax	Methode `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Samenvoegen/Vervangen	Voegt nieuwe staat samen met de huidige (shallow merge)	Vervangt de huidige staat door de nieuwe
Asynchroon	Asynchroon	Asynchroon bij aanroepen vanuit event handlers, maar synchroon binnen de React-renderfase
Afhankelijk van vorige staat	Functie doorgeven aan `setState`: `this.setState(prevState => ({...}))`	Functie doorgeven aan de update-functie: `setState(prev => ({...}))`

Hoe verander je de staat van componenten correct in React?