Comment utiliser useState en React ? Le guide complet

11/12/2024 • Melvynx

Loading...

Content

  • La syntaxe de useState
  • Le state provoque un render
  • Le state est modifié après le render
  • La callback syntax pour résoudre ce problème
  • Conclusion

Courses

  • Formation React
  • Formation JavaScript
  • Formation Tailwind
  • Formation NextJS Full-Stack
  • Formation AI (Cursor / Copilot)
  • Formation HTML/CSS

Products

  • Codeline
  • Chat2Code
  • QuizUp
  • NOW.TS
  • Lumail
  • SaveIt.now
  • PadelTally.com

Popular articles

  • Mon année 2024
  • Mon année 2025
  • All articles

Categories

  • CSSCSS
  • HTMLHTML
  • JavaScriptJavaScript
  • Next.jsNext.js
  • ReactReact
  • TypeScriptTypeScript
codelynx.dev
Terms & Conditions•Privacy Policy•Refund Policy

Copyright © 2025 Codelynx LLC. All rights reserved.

useState est le hook le plus utilisé en React. Il permet de stocker des données qui, quand elles sont modifiées, vont provoquer un nouveau rendu de ton composant. Dans ce guide, je vais t'expliquer en détail comment il fonctionne.

La syntaxe de useState

useState retourne un tableau avec deux éléments :

JSX
const Component = () => {
  const [count, setCount] = useState(0);
  //     ^      ^           ^
  //     |      |           |
  // getter  setter    valeur initiale

  return <div>{count}</div>;
};
  1. Le getter (count) : C'est la valeur actuelle du state
  • Le setter (setCount) : C'est la fonction qui permet de modifier le state
  • La valeur initiale (0) : C'est la valeur par défaut du state

    • Voici un exemple simple avec un compteur :

    import { useState } from "react";

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

return (

<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
); }
    Open on CodeSandboxOpen Sandbox

    Le state provoque un render

    Quand tu modifies un state avec le setter, React va re-rendre ton composant. Un render, c'est quoi exactement ?

    1. React exécute ton composant
    2. Il compare le nouveau JSX avec l'ancien
    3. Il met à jour le DOM si nécessaire

    Le DOM n'est mis à jour que si le JSX a changé. React est très optimisé pour ça !

    Voici un exemple qui montre bien le render :

    import { useState } from "react";

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

console.log("Component rendered!");

const increment = () => {
console.log("Incrementing...");
setCount(count + 1);
};

const updateWithSameValue = () => {
console.log("Updating with same value...");
setCount(count);
};

return (

<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={updateWithSameValue}>Same Value</button>
</div>
); }
    Open on CodeSandboxOpen Sandbox

    Tu peux voir que :

    • Quand tu cliques sur "Increment", le composant est re-rendu car la valeur change
    • Quand tu cliques sur "Same Value", le composant n'est pas re-rendu car la valeur est la même

    Le state est modifié après le render

    C'est très important de comprendre que le state n'est pas modifié immédiatement. React attend la fin du render pour mettre à jour le state.

    Regarde cet exemple :

    import { useState } from "react";

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

const increment = () => {
console.log("Count 1", count);
setCount(count + 1);
console.log("Count 2", count);
setCount(count + 1);
console.log("Count 3", count);
setCount(count + 1);
};

return (

<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment 3 times</button>
</div>
); }
    Open on CodeSandboxOpen Sandbox

    Le compteur n'augmente que de 1 alors qu'on appelle setCount trois fois ! C'est parce que count garde la même valeur jusqu'au prochain render.

    Pour résoudre ce problème, on peut utiliser la callback syntax du setter.

    La callback syntax pour résoudre ce problème

    Le setter de useState peut prendre une fonction en paramètre. Cette fonction reçoit la valeur actuelle du state et doit retourner la nouvelle valeur :

    JSX
    const Component = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    // ❌ Utilise toujours la même valeur de count
    setCount(count + 1);
    // ✅ Utilise la valeur la plus récente
    setCount((previousCount) => previousCount + 1);
  };

  return <button onClick=

    Voici l'exemple précédent corrigé avec la callback syntax :

    import { useState } from "react";

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

const increment = () => {
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
};

return (

<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment 3 times</button>
</div>
); }
    Open on CodeSandboxOpen Sandbox

    Maintenant le compteur augmente bien de 3 ! La callback reçoit toujours la dernière valeur du state, même si celui-ci n'a pas encore été mis à jour dans le composant.

    Cette syntaxe est particulièrement utile quand :

    • Tu as besoin de la valeur précédente pour calculer la nouvelle
    • Tu fais plusieurs setState à la suite
    • Tu as une closure qui capture une ancienne valeur du state

    Conclusion

    Tu as maintenant une compréhension complète de comment fonctionne useState :

    • Sa syntaxe avec getter et setter
    • Comment il provoque des renders
    • Pourquoi le state est modifié après le render
    • Comment utiliser la callback syntax pour des mises à jour consécutives

    Tu peux retrouver ma vidéo YouTube sur le sujet :

    Si tu veux approfondir tes connaissances React, je te conseille de lire :

    • Quand utiliser useEffect
    • Comment utiliser useRef
    • Les formulaires en React
    Reçois une formation React gratuite
    Deviens un expert React en comprenant tous les concepts avancés de cette librairie.
    {increment}>Increment</
    button
    >;
    };
    Codelynx.dev
    Posts