État indépendant

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 26 sur 42.

Besoin de vous souvenir de deux choses ? Appelez useState deux fois. Chaque appel crée une pièce d'état complètement indépendante :

const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);

La mise à jour de cats déclenche un nouveau rendu du composant, mais dogs conserve sa valeur intacte. Chaque état a son propre setter, et les mélanger est l'erreur de débutant la plus courante : setCats(dogs + 1) compile très bien et reste pourtant incorrecte.

Défi

Moyen

Gérez le tableau d'entrée du refuge : deux compteurs qui n'interfèrent pas.

Ajoutez deux états, cats et dogs, commençant tous deux à 0.
Affichez-les dans id="cats" et id="dogs".
Le bouton id="add-cat" ajoute un chat ; id="add-dog" ajoute un chien.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>