Malheureusement, useRef est sous-estimé. Ce n’est pas l’un des hameçons les plus populaires, mais il est bénéfique. Savoir comment et où l'utiliser peut obtenir d'excellents résultats.

Commençons par les bases

useRef est un React Hook qui vous permet de référencer une valeur non nécessaire pour le rendu.

React se souviendra de la valeur que vous créez via useRef, que vous créiez un objet JavaScript faisant référence à un nœud dans le DOM ou à une valeur simple, et elle ne sera pas perdue lors des nouveaux rendus.

Qu'est-ce que cela nous apporte ?

1. Accès aux éléments DOM :

   • Vous pouvez facilement accéder aux éléments du DOM. Par exemple, vous pouvez obtenir la valeur d'un champ de saisie, vous concentrer sur des éléments spécifiques, obtenir leur hauteur et leur largeur, faire défiler jusqu'à une partie particulière de l'écran, et bien plus encore.

2. Stockage de valeurs mutables :

   • Vous pouvez mémoriser toutes les données dont vous avez besoin sans restituer les composants. Par exemple, si vous avez besoin d'un compteur ou d'une minuterie, choisissez useRef plutôt que useState.

Exemples

Voici quelques exemples pour illustrer la puissance de useRef.

Exemple 1 : référence à un numéro

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      >
  );
};

export default Counter;

Dans cet exemple :

• refCount est une référence mutable à un nombre.
• refInputField est une référence à un élément d'entrée.
• Lorsque vous cliquez sur le bouton, le compteur s'incrémente et le champ de saisie prend le focus.

Exemple 2 : Garder une trace des valeurs précédentes

Un autre cas d'utilisation courant de useRef consiste à garder une trace des valeurs précédentes.

import React, { useRef, useEffect, useState } from 'react';

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

Dans cet exemple :

• prevCountRef garde la trace de la valeur précédente de count.
• Le hook useEffect met à jour prevCountRef.current chaque fois que le nombre change.
• Cela vous permet d'afficher à la fois les décomptes actuels et précédents sans déclencher de nouveaux rendus inutiles.

Trucs et astuces avancés avec useRef

1. Valeurs persistantes dans les rendus

useRef peut être utilisé pour conserver les valeurs à travers les rendus sans provoquer de nouveau rendu, contrairement à useState. Ceci est particulièrement utile pour stocker des valeurs qui n'ont pas d'impact direct sur l'interface utilisateur mais qui doivent être mémorisées.

Exemple : suivi du nombre de rendus d'un composant.

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    renderCount.current  = 1;
  });

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. Intégration avec des bibliothèques tierces

useRef est inestimable lorsque vous travaillez avec des bibliothèques tierces qui nécessitent une manipulation directe des éléments DOM, comme l'intégration avec des bibliothèques de graphiques, la gestion de lecteurs vidéo ou la gestion d'animations.

Exemple : Intégration d'une bibliothèque de graphiques.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. Éviter les nouveaux rendus inutiles dans les applications complexes

Dans les applications complexes où les performances sont essentielles, l'utilisation de useRef pour stocker des objets mutables peut permettre d'éviter de nouveaux rendus inutiles.

Exemple : stockage d'un objet d'état mutable.

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. Éviter les problèmes de fermeture

L'utilisation de useRef peut aider à éviter les problèmes de fermeture en fournissant une référence stable à une valeur qui persiste dans les rendus.

Exemple : minuterie avec useRef pour éviter un état obsolète.

import React, { useRef, useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

Conclusion

Les crochets sont excellents et vous devriez les utiliser. Vous pouvez réaliser beaucoup de choses si vous comprenez comment fonctionne React et appliquez correctement les hooks. useRef est particulièrement puissant pour :

• Accès et manipulation des éléments DOM.
• Stockage de valeurs mutables qui ne déclenchent pas de nouveaux rendus.
• Valeurs persistantes dans les rendus.
• Intégration avec des bibliothèques tierces.
• Éviter les nouveaux rendus inutiles dans les applications complexes.
• Atténuation des problèmes de fermeture.

En comprenant et en utilisant useRef, vous pouvez écrire des composants React plus efficaces et efficients. Le véritable pouvoir des hooks réside dans la compréhension de leur comportement et dans leur application judicieuse.

Savez-vous que useState n'est pas toujours la bonne réponse ?