Crochet de useRefréaction

Le useRefcrochet vous permet de conserver des valeurs entre les rendus.

Il peut être utilisé pour stocker une valeur modifiable qui ne provoque pas de nouveau rendu lors de la mise à jour.

Il peut être utilisé pour accéder directement à un élément DOM.

Ne provoque pas de re-rendus

Si nous essayions de compter le nombre de rendus de notre application à l'aide du useStatecrochet, nous serions pris dans une boucle infinie puisque ce crochet lui-même provoque un nouveau rendu.

Pour éviter cela, nous pouvons utiliser le useRefcrochet.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

useRef()ne renvoie qu'un seul élément. Il renvoie un objet appelé current.

Lorsque nous initialisons useRef, nous définissons la valeur initiale : useRef(0).

Exécutez ceci sur votre ordinateur et essayez de saisir l'entrée pour voir le nombre de rendus de l'application augmenter.

Accéder aux éléments DOM

En général, nous voulons laisser React gérer toutes les manipulations du DOM.

Mais il existe des cas où useRefil peut être utilisé sans causer de problèmes.

Dans React, on peut ajouter un refattribut à un élément pour y accéder directement dans le DOM.

import { useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputElement = useRef();

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

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Suivi des changements d'état

Le useRefcrochet peut également être utilisé pour garder une trace des valeurs d'état précédentes.

En effet, nous sommes capables de conserver des useRefvaleurs entre les rendus.

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Cette fois, nous utilisons une combinaison de useState, useEffectet useRefpour garder une trace de l'état précédent.

Dans le useEffect, nous mettons à jour la useRefvaleur actuelle chaque fois que le inputValueest mis à jour en saisissant du texte dans le champ de saisie.