Qu'est-ce que l'état ?

Jusqu'à présent, tout était figé : les données entraient, une page sortait, rien ne changeait jamais. Les vraies applications se souviennent des choses qui changent : un nombre de j'aime, un menu ouvert, le texte dans une barre de recherche. Cette mémoire s'appelle l'état (state).

React donne un état aux composants grâce au hook useState :

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Une ligne, trois éléments :

• count : la valeur actuelle
• setCount : la fonction qui la modifie
• useState(0) : la valeur de départ

La règle d'or : ne jamais assigner directement le state. count = 5 modifie une variable que React ne surveille pas. setCount(5) modifie le state et déclenche un nouveau rendu du composant. C'est ce nouveau rendu qui met à jour l'écran.