Frontend Academy · Leçon

Hook useState : état et nouveaux rendus

Appelez useState pour ajouter un état local à un composant, mettez-le à jour avec la fonction de définition et comprenez quand et pourquoi React effectue un nouveau rendu.

Hook useState : état et nouveaux rendus est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu’est-ce que l’état ?

L’état est une donnée qui évolue dans le temps et qui doit entraîner la mise à jour de l’interface lorsqu’elle change. Contrairement aux variables ordinaires, les changements d’état déclenchent un nouveau rendu du composant React avec la nouvelle valeur.

Syntaxe de useState

useState(initialValue) renvoie un tuple : la valeur actuelle et une fonction de mise à jour. Déstructurez-le immédiatement.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

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

TypeScript : typer useState

TypeScript déduit le type à partir de la valeur initiale. Lorsque cette valeur est ambiguë, comme null ou un tableau vide, ajoutez un paramètre de type explicite.

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

Nouveau rendu lors d’un changement d’état

L’appel de la fonction de mise à jour planifie un nouveau rendu. React rappelle votre fonction de composant avec la nouvelle valeur d’état. Le JSX renvoyé remplace le rendu précédent dans le DOM virtuel.

Les mises à jour d’état sont asynchrones

Les mises à jour d’état sont regroupées et appliquées avant le rendu suivant, et non immédiatement. Ne lisez pas l’état mis à jour dans le même gestionnaire d’événement : la nouvelle valeur n’est disponible qu’au rendu suivant.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

Mises à jour fonctionnelles

Lorsque le nouvel état dépend de l’état précédent, utilisez la forme fonctionnelle de la fonction de mise à jour. Cela évite les problèmes liés aux fermetures obsolètes.

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

État avec des objets

Lorsque l’état est un objet, créez toujours un nouvel objet : ne modifiez pas l’objet existant. React compare les références ; les mutations ne déclencheront pas de nouveaux rendus.

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

Plusieurs variables d’état

Appelez useState plusieurs fois pour des variables d’état indépendantes. C’est plus clair qu’un grand objet d’état unique lorsque les valeurs ne changent pas ensemble.

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

Initialisation différée

Si l’état initial nécessite un calcul coûteux, transmettez une fonction à useState. Elle ne s’exécute qu’au premier rendu, et non à chaque nouveau rendu.

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

Quand ne pas utiliser l’état

Toutes les variables n’ont pas besoin d’être conservées dans l’état. Les valeurs dérivées, comme total = items.reduce(…), doivent être calculées pendant le rendu et non stockées dans l’état. Un état dérivé des propriétés est généralement le signe d’une sur-ingénierie.

Remontée de l’état

Lorsque deux composants frères doivent partager un état, remontez celui-ci jusqu’à leur ancêtre commun, puis transmettez-le sous forme de propriétés. Il s’agit du modèle fondamental de gestion de l’état dans React avant d’utiliser un contexte ou un magasin.

Vérification rapide

Pourquoi devez-vous utiliser la forme fonctionnelle setCount(prev => prev + 1) plutôt que setCount(count + 1) ?

Récapitulatif : useState

useState renvoie [valeur, fonction de mise à jour]. La valeur initiale définit le type, ou utilisez un type générique explicite. La fonction de mise à jour déclenche un nouveau rendu. Utilisez les mises à jour fonctionnelles lorsque le nouvel état dépend de l’ancien. Pour les objets, créez toujours de nouveaux objets par décomposition et ne les modifiez jamais. Utilisez l’initialisation différée pour les calculs coûteux. Remontez l’état jusqu’aux ancêtres communs lorsque des composants frères doivent le partager.

Questions Fréquemment Posées

La leçon « Hook useState : état et nouveaux rendus » est-elle gratuite ?

Oui — le texte complet de « Hook useState : état et nouveaux rendus » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Hook useState : état et nouveaux rendus » ?

Appelez useState pour ajouter un état local à un composant, mettez-le à jour avec la fonction de définition et comprenez quand et pourquoi React effectue un nouveau rendu. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Hook useState : état et nouveaux rendus » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy