Voyons avec React Three Fiber quels React hooks nous utiliserons couramment et comment les utiliser tout en évitant les pièges courants.

Si vous n'êtes pas familier avec les hooks React, je vous recommande de lire d'abord la documentation officielle.

useState

useState vous permet de créer une variable d'état et une fonction pour la mettre à jour.

Copy
const [color, setColor] = useState("white");

Il retourne un tableau avec deux éléments :

• la variable d'état
• la fonction pour la mettre à jour.

Vous pouvez l'utiliser comme ceci :

Copy
import { useState } from "react";

// ...

const Cube = (props) => {
  const [color, setColor] = useState("white");

  useControls({
    changeColorToRed: button(() => setColor("red")),
    changeColorToBlue: button(() => setColor("blue")),
    changeColorToGreen: button(() => setColor("green")),
  });
  return (
    <mesh {...props}>
      <boxGeometry />
      <meshStandardMaterial color={color} />
    </mesh>
  );
};

// ...

À chaque fois que vous cliquez sur l'un des boutons, la couleur du cube change.

Parce que la mise à jour de l'état déclenche un re-render, vous devriez éviter d'appeler useState à l'intérieur d'une boucle ou d'une condition.

Nous verrons la bonne manière de faire des mises à jour fréquentes avec r3f dans la leçon React Three Fiber hooks, et discuterons des pièges communs à éviter dans la leçon optimization.

Pour le moment, voici quelques règles générales avec useState :

• Évitez d'appeler useState pour des valeurs changeant rapidement.
• Utilisez-le au niveau le plus profond possible. De cette façon, vous éviterez de re-rendre des éléments qui n'ont pas besoin d'être re-rendus.

useMemo

useMemo vous permet de mémoriser une valeur. Cela signifie que la valeur sera calculée uniquement lorsque ses dépendances auront changé.

Remplaçons notre material par un material mémorisé :

Copy
import { useMemo, useState } from "react";

// ...

const Cube = (props) => {
  // ...
  const material = useMemo(() => <meshStandardMaterial color={color} />, []);

  return (
    <mesh {...props}>
      <boxGeometry />
      {material}
    </mesh>
  );
};

// ...

• Le premier argument est une fonction qui retourne la valeur à mémoriser. Dans notre cas, c'est un composant material.
• Le deuxième argument est un tableau de dépendances. Nous avons passé un tableau vide, ce qui signifie que le material sera calculé une seule fois.
• La valeur retournée est la valeur mémorisée.

Désormais, lorsque nous cliquons sur les boutons, la couleur du cube ne change pas, car le material n'est pas recalculé.

Pour corriger cela, nous devons passer la color comme dépendance :

Copy
const material = useMemo(() => <meshStandardMaterial color={color} />, [color]);

Maintenant, lorsque nous cliquons sur les boutons, la couleur du cube change, car le material est recalculé lorsque l'état color change.

Nous avons fait cela pour vous montrer comment useMemo fonctionne, mais dans ce cas, il n'est pas nécessaire de mémoriser le material. React Three Fiber effectue déjà les optimisations nécessaires pour nous.

Les cas où useMemo peut être bénéfique sont :

• Lorsqu'une valeur est coûteuse à calculer sur un composant qui se rend fréquemment.
• Lorsqu'un composant a beaucoup d'enfants et que vous souhaitez éviter de les rerendre.
• Lorsqu'un composant a beaucoup de props et que vous souhaitez éviter de le rerendre.

N'utilisez pas useMemo pour une optimisation prématurée lorsque vous débutez avec React et r3f. Cela peut être délicat à utiliser et peut entraîner des bugs. Préférez l'utiliser lorsque vous avez des problèmes de performance.

useRef

useRef vous permet de créer une valeur mutable qui persiste à travers les rendus.

Il est couramment utilisé pour stocker une référence à un élément DOM ou à un objet Three.js mais vous pouvez l'utiliser pour stocker n'importe quelle valeur.

L'avantage de useRef est qu'il ne déclenche pas de re-rendu lorsque sa valeur change. Avec r3f, c'est parfait pour les animations ou toute valeur qui change fréquemment.