Comprendre useState et useRef dans React

Nov 15, 2024
10min read time
Comprendre useState et useRef dans React

React fournit des outils puissants pour gérer l'état et les références dans les composants fonctionnels. Deux hooks couramment utilisés, useState et useRef, reviennent souvent dans les discussions sur la gestion du comportement des composants. Bien qu'ils puissent sembler similaires à première vue, ils ont des objectifs différents. Dans ce blog, nous explorerons les principales différences entre useState et useRef et quand utiliser chacun.

Qu'est-ce que useState ?

Le hook useState est utilisé pour gérer la logique d'état dans les composants React. Il vous permet de créer des variables d'état, qui entraîneront un nouveau rendu du composant chaque fois que leurs valeurs changent.

Caractéristiques clés :

  1. Déclenche des rendus : Toute mise à jour d'une variable useState entraînera un nouveau rendu du composant pour refléter le nouvel état.

  2. Mises à jour asynchrones : Les mises à jour d'état sont regroupées et appliquées de manière asynchrone.

  3. Utilisé pour l'état de l'interface utilisateur : Idéal pour gérer des états qui affectent directement ce que l'utilisateur voit, tels que les entrées de formulaire, les compteurs ou les bascules.

Exemple

import React, { useState } from 'react';
function Counter() { 
    const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Qu'est-ce que useRef ?

Le hook useRef est principalement utilisé pour gérer des références mutables qui ne déclenchent pas de nouveaux rendus. Il peut stocker une référence à un élément DOM ou conserver une valeur mutable entre les rendus.

Caractéristiques clés :

  1. Ne déclenche pas de rendus : La mise à jour d'une valeur useRef n'entraîne pas le rendu du composant.

  2. Utilisé pour les références : Souvent utilisé pour référencer des éléments DOM ou stocker des valeurs qui doivent persister entre les rendus sans affecter l'interface utilisateur.

  3. Accès à la valeur actuelle : La propriété current est utilisée pour accéder ou mettre à jour la valeur stockée dans la référence.

Exemple

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Click the button to focus" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

Différences clés entre useState et useRef

Fonctionnalité

useState

useRef

Objectif

Gère l'état qui déclenche des rendus

Conserve une référence mutable

Déclenchement des rendus

Oui

Non

Utilisation

États liés à l'interface utilisateur

Références ou valeurs persistantes

Mises à jour

Asynchrones

Synchrones

Quand utiliser useState

Utilisez useState lorsque :

  • Vous voulez que les modifications d'une valeur déclenchent un nouveau rendu du composant.

  • Vous gérez des états liés à l'interface utilisateur, comme les entrées de formulaire, les bascules de visibilité ou les listes dynamiques.

  • La valeur est directement liée à ce qui est affiché dans l'interface utilisateur.

Exemple: Suivi de l'état d'entrée

function TextInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="Type something" 
      />
      <p>Typed Text: {text}</p>
    </div>
  );
}

Quand utiliser useRef

Utilisez useRef lorsque :

  • Vous avez besoin de référencer directement un élément DOM.

  • Vous souhaitez conserver des valeurs entre les rendus sans déclencher de rendus.

  • Vous avez besoin d'une variable mutable que React ne suit pas dans le cycle de rendu.

Exemple: Suivi des nombres de rendus

function RenderCounter() {
  const renderCount = useRef(0);

  renderCount.current += 1;

  return <p>Component rendered {renderCount.current} times</p>;
}

Utiliser useState et useRef ensemble

Dans certains cas, vous pourriez avoir besoin à la fois de useState et de useRef. Par exemple, si vous voulez gérer un état qui affecte l'interface utilisateur tout en suivant une valeur mutable en arrière-plan.

Exemple: Minuterie avec pause/reprise

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const timerRef = useRef();

  const startTimer = () => {
    timerRef.current = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(timerRef.current);
  };

  return (
    <div>
      <p>Seconds: {seconds}</p>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

Conclusion

Les hooks useState et useRef sont essentiels dans React, chacun ayant un objectif distinct. Comprendre quand les utiliser vous aidera à mieux gérer le comportement des composants. Utilisez useState pour les états qui impactent l'interface utilisateur et déclenchent des rendus, et useRef pour des valeurs persistantes sans mises à jour de l'interface utilisateur. En maîtrisant ces hooks, vous serez prêt à créer des applications React dynamiques et réactives avec facilité !