Gestion de l'état dans React avec useRef

Lors de la création d'applications React, la gestion de l'état est un aspect fondamental. Alors que la plupart des développeurs connaissent useState, le hook useRef passe souvent inaperçu. Dans ce blog, nous explorerons comment useRef peut être un outil puissant pour gérer l'état et comprendre ses cas d'utilisation uniques.

Qu’est-ce que useRef ?

Le hook useRef renvoie un objet ref mutable dont la propriété .current est initialisée à l'argument passé. Cet objet ref persiste pendant toute la durée de vie du composant. Contrairement à l'état, la modification d'une référence n'entraîne pas un nouveau rendu du composant.

Pourquoi utiliser useRef ?

Accès aux éléments DOM : useRef est couramment utilisé pour accéder directement à un élément DOM, vous permettant de le manipuler sans provoquer de nouveau rendu.
Stockage des valeurs mutables : vous pouvez utiliser useRef pour stocker des valeurs qui ne nécessitent pas de nouveau rendu une fois mises à jour, comme des minuteries ou des valeurs d'état précédentes.

Exemple : gestion de l'état avec useRef

Voyons comment useRef peut être utilisé pour gérer l'état dans un contre-exemple simple. Cet exemple montrera comment incrémenter un compteur sans provoquer de nouveaux rendus inutiles.

Mise en œuvre étape par étape

import React, { useRef } from 'react';

function Counter() {
    // Create a ref to hold the count
    const countRef = useRef(0);

    const increment = () => {
        countRef.current += 1; // Increment the count
        alert(`Current Count: ${countRef.current}`); // Show the current count
    };

    return (
        <div>
            <h1>Counter Example</h1>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default Counter;

Répartition du code

Création d'une référence : nous initialisons countRef en utilisant useRef(0). Cela définit le décompte initial à 0.
Incrémentation du nombre : dans la fonction d'incrémentation, nous mettons à jour directement countRef.current. Cela ne déclenche pas de nouveau rendu, ce qui est efficace pour les performances.
Commentaires des utilisateurs : une alerte affiche le décompte actuel à chaque fois que vous cliquez sur le bouton.

Quand utiliser useRef plutôt que useState

Performance : si vous devez stocker une valeur sans provoquer de nouveau rendu, useRef est la voie à suivre. Ceci est particulièrement utile pour les applications sensibles aux performances.
État non-UI : utilisez useRef pour les valeurs qui ne sont pas directement liées au rendu, telles que les minuteries, les intervalles ou les références d'éléments de formulaire.

Conclusion

Bien que useState soit essentiel pour gérer l'état qui affecte le rendu, useRef fournit une alternative légère pour gérer les valeurs mutables sans déclencher de nouveaux rendus. Comprendre quand utiliser useRef peut vous aider à écrire des composants React plus efficaces et efficients.

Alors la prochaine fois que vous travaillerez avec state dans React, demandez-vous si useRef pourrait être le bon outil pour le travail ! Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!