Pourquoi useState() déclenche-t-il des doubles rendus dans le mode développement de React ?

Pourquoi useState() provoque-t-il des doubles rendus en mode développement ?

Dans React, l'utilisation de useState pour la gestion de l'état peut déclencher deux rendus pendant l'état mises à jour. Ce comportement est attribué au mode strict de React, qui améliore le débogage du développement en simulant les effets secondaires potentiels.

Considérez l'extrait de code suivant :

import React, { useState } from "react";
...
const [number, setNumber] = useState(0);
...
function changeNumber() {
    setNumber(state => state + 1);
}
...

Lorsque vous cliquez sur le bouton qui déclenche la fonction changeNumber, vous pouvez observer deux journaux de console signalant le re-rendu des composants. Cela est dû au mode strict, qui force des fonctions telles que les mises à jour useState à s'exécuter deux fois dans les environnements de développement.

La documentation de React explique que le mode strict détecte et met en évidence les effets secondaires potentiels en réinvoquant intentionnellement certaines fonctions, y compris les fonctions de mise à jour d'état. comme ceux passés à useState. Le but est de faciliter le débogage et d'assurer un comportement déterministe.

Pour atténuer ce double rendu, vous pouvez désactiver le Mode Strict en supprimant le code suivant du point d'entrée de votre application :

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

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!