Qu'est-ce que l'état ?

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 22 sur 42.

Jusqu’à présent, tout était figé : des données entraient, une page en sortait, rien ne changeait jamais. Les véritables applications se souviennent des choses qui changent : le nombre de mentions J’aime, un menu ouvert, le texte dans un champ de recherche. Cette mémoire s’appelle l’état.

React fournit 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 initiale

La règle d’or : ne modifie jamais directement l’état. count = 5 provoque une erreur, car count est une const. Même si sa valeur pouvait changer, React ne le saurait pas. setCount(5) modifie l’état et relance le rendu du composant. C’est ce nouveau rendu qui met l’écran à jour.

Essayez vous-même

Cette leçon ne comprend pas de défi de code.