Un conseil sur les performances useState que vous ne connaissiez peut-être pas

Disons que nous avons un composant React avec un useState à l'intérieur.

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation())

    return (
      // ...
    );
  }

Nous initions l'état avec le résultat de la fonction coûteuseCalculation.
Chaque fois que le composant est restitué, la fonction coûteuseCalculation s'exécutera même si nous n'avons besoin que de son résultat comme valeur initiale de useState. Le résultat de la fonction ne sera pas utilisé.

Pour éviter les calculs coûteux lors des re-rendus, transmettez la fonction elle-même sans l'appeler. React est suffisamment intelligent pour invoquer la fonction elle-même lors du montage et non à chaque rendu.

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation)

    return (
      // ...
    );
  }

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!