Comment accéder aux accessoires et valeurs d’état précédents avec React Hooks

Apprenez à utiliser les références pour stocker les valeurs précédentes de state et props dans React, car React ne dispose pas de moyen intégré pour accéder à cette valeur.

Parfois, nous souhaitons accéder à la valeur d’un accessoire ou d’une valeur d’état précédente. React ne fournit pas de moyen intégré pour ce faire, explorons donc comment procéder avec les références.

Utiliser les références pour stocker les anciennes valeurs réactives

Dans React, les références sont des valeurs non réactives dans les composants et les hooks. Nous pouvons l’utiliser pour stocker les valeurs des éléments que nous voulons conserver entre les rendus et ne déclencherons pas de nouveau rendu lorsque leurs valeurs changent.

Pour définir une référence, nous pouvons utiliser le useRef crochet.

Par exemple, nous écrivons :

import { useRef } from "react";

export default function App() {
  const ref = useRef();
  ref.current = 100;
  console.log(ref.current);

  return <div className="App"></div>;
}

pour définir le ref ref avec le React intégré useRef crochet.

Et nous définissons sa valeur en définissant ref.current à 100. On peut mettre le ref.current attribution de valeur au niveau racine du composant car elle ne déclenchera pas de nouveau rendu du composant lorsque nous lui attribuons une valeur. Et la valeur sera conservée tant que le composant sera monté.

Ces caractéristiques des références les rendent idéales pour conserver les valeurs précédentes des valeurs réactives de React.

Pour utiliser des références pour stocker les valeurs précédentes des états, nous pouvons attribuer ces valeurs aux références. Par exemple, nous écrivons :

import { useRef, useState } from "react";

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

  const onClick = () => {
    prevCountRef.current = count;
    setCount((c) => c + 1);
  };
  console.log(prevCountRef.current, count);

  return (
    <div className="App">
      <button onClick={onClick}>increment</button>
      <div>{count}</div>
    </div>
  );
}

pour définir le count état avec le useState crochet. Et nous définissons le prevCountRef réf avec le useRef crochet.

Ensuite, nous définissons le onClick fonction qui définit le prevCountRef au count valeur avant d’appeler setCount pour incrémenter le count indiquer la valeur par 1.

Ensuite on ajoute un bouton pour appeler onClick lorsque nous cliquons sur le bouton pour mettre à jour les deux valeurs. En conséquence, nous voyons dans le journal de la console que prevCountRef.current est toujours le précédent count valeur et count ayant la dernière valeur.

De même, nous pouvons stocker les valeurs précédentes des accessoires de la même manière puisque les accessoires sont également des valeurs réactives.

Pour faire la même chose avec les accessoires, on écrit :

import { useEffect, useRef, useState } from "react";

const CountDisplay = ({ count }) => {
  const prevCountRef = useRef();
  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);
  console.log(prevCountRef.current, count);
  return <div>{count}</div>;
};

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

  const onClick = () => {
    setCount((c) => c + 1);
  };

  return (
    <div className="App">
      <button onClick={onClick}>increment</button>
      <CountDisplay count={count} />
    </div>
  );
}

pour définir le CountDisplay composant.

Dans celui-ci, nous prenons le count prop et attribuez-le comme valeur du prevCountRef valeur comme le count changements de valeur.

Nous pouvons le faire en mettant prevCountRef.current = count; dans le useEffect rappel du crochet et faites en sorte que le crochet surveille le count valeur.

Cela peut conserver le précédent count prop car il ne déclenchera pas de nouveau rendu jusqu’à ce que le count prop est mis à jour.

En conséquence, nous voyons dans le journal de la console que prevCountRef.current est toujours le précédent count valeur et count ayant la dernière valeur comme nous le faisons avec l’exemple précédent.

Pour rendre réutilisable la logique dont nous disposons pour stocker les accessoires ou les états précédents, nous pouvons déplacer la logique dans son propre hook.

Pour ce faire, nous faisons en sorte que le hook accepte la valeur réactive de l’accessoire ou de l’état et renvoyons les valeurs de variable réactive précédentes et récentes.

Par exemple, nous pouvons écrire notre propre hook en écrivant :

import { useEffect, useRef, useState } from "react";

const usePrevious = (value) => {
  const prevValueRef = useRef();
  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  return { prev: prevValueRef.current, current: value };
};

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

  const onClick = () => {
    setCount((c) => c + 1);
  };
  console.log(prev, current);

  return (
    <div className="App">
      <button onClick={onClick}>increment</button>
      <div>{count}</div>
    </div>
  );
}

pour définir le usePrevious crochet. Dans celui-ci, nous prenons simplement la logique que nous avions précédemment et la mettons dans la fonction hook.

La seule différence est que le crochet prend le value paramètre où value est la valeur réactive. Et la fonction hook renvoie un objet avec le prev et current valeurs qui découlent de la même logique qu’auparavant.

Nous utilisons le usePrevious crochet en passant le count état dedans et prendre le prev et current les propriétés de l’objet sont renvoyées.

De même, nous pouvons utiliser le usePrevious hook pour stocker la valeur précédente des accessoires en écrivant :

import { useEffect, useRef, useState } from "react";

const usePrevious = (value) => {
  const prevValueRef = useRef();
  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  return { prev: prevValueRef.current, current: value };
};

const CountDisplay = ({ count }) => {
  const { prev, current } = usePrevious(count);
  console.log(prev, current);

  return <div>{count}</div>;
};

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

  const onClick = () => {
    setCount((c) => c + 1);
  };

  return (
    <div className="App">
      <button onClick={onClick}>increment</button>
      <CountDisplay count={count} />
    </div>
  );
}

Nous appelons simplement le usePrevious avec le count accessoire dans le CountDisplay composant plutôt que dans le App composant.

Quoi qu’il en soit, nous obtenons le même résultat.

Conclusion

Nous pouvons utiliser des références pour stocker les valeurs précédentes de state et props, car les références ne déclenchent pas le nouveau rendu des composants lorsque leurs valeurs changent.