Pourquoi l'utilisation de « setInterval » avec les hooks d'état React provoque-t-elle un comportement inattendu ?

Utilisation des hooks d'état React avec setInterval : comprendre le problème de mise à jour de l'état

Dans React, l'utilisation du hook d'état dans setInterval peut entraîner des problèmes avec mises à jour de l'état. Cela se produit lorsque la fonction de rappel transmise à setInterval conserve l'accès à la valeur de l'état initial, empêchant ainsi les mises à jour ultérieures d'être reflétées.

Le problème

Considérez le composant Clock suivant :

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return <div>Seconds: {time}</div>;
}

Le problème réside dans la fonction de rappel setTime. Il fait référence à la variable temporelle au moment du premier rendu, et non à la valeur mise à jour des rendus suivants. De ce fait, la mise à jour de l'état est limitée à la valeur initiale.

La solution

Pour remédier à ce problème, utilisez le formulaire de rappel du state hook, qui fournit accès à la valeur d'état actuelle :

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime((prevTime) => prevTime + 1); // Get the latest state value
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return <div>Seconds: {time}</div>;
}

Maintenant, la fonction de rappel utilise correctement la dernière valeur d'état, garantissant que l'heure est mise à jour comme attendu.

Approches alternatives

Dan Abramov explore d'autres façons de gérer setInterval avec des hooks dans son article de blog, proposant des approches alternatives qui peuvent convenir à des scénarios spécifiques.

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!