Vediamo con React Three Fiber quali React hooks useremo comunemente e come utilizzarli evitando errori comuni.

Se non conosci i React hooks, ti consiglio di leggere prima la documentazione ufficiale.

useState

useState ti permette di creare una variabile di stato e una funzione per aggiornarla.

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

Restituisce un array con due elementi:

• la variabile di stato
• la funzione per aggiornarla.

Puoi utilizzarlo in questo modo:

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>
  );
};

// ...

Ogni volta che clicchi su uno dei pulsanti, cambia il colore del cubo.

Poiché l'aggiornamento dello stato innesca un re-render, dovresti evitare di chiamare useState all'interno di un ciclo o di una condizione.

Vedremo il modo giusto di fare aggiornamenti frequenti con r3f nella lezione sui React Three Fiber hooks e discuteremo degli errori comuni da evitare nella lezione di ottimizzazione.

Per il momento, ecco alcune linee guida con useState:

• Evita di chiamare useState per valori che cambiano rapidamente.
• Usalo al livello più profondo possibile. In questo modo, eviterai di ri-renderizzare oggetti che non necessitano di essere ri-renderizzati.

useMemo

useMemo ti permette di memorizzare un valore. Questo significa che il valore verrà calcolato solo quando le sue dipendenze cambiano.

Sostituiamo il nostro material con uno memorizzato:

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

// ...

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

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

// ...

• Il primo argomento è una funzione che restituisce il valore da memorizzare. Nel nostro caso, è un componente material.
• Il secondo argomento è un array di dipendenze. Abbiamo passato un array vuoto, il che significa che il material verrà calcolato solo una volta.
• Il valore restituito è il valore memorizzato.

Ora, quando clicchiamo sui pulsanti, il colore del cubo non cambia, perché il material non viene ricalcolato.

Per risolvere questo problema, dobbiamo passare color come dipendenza:

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

Adesso, quando clicchiamo sui pulsanti, il colore del cubo cambia, perché il material viene ricalcolato quando lo stato color cambia.

Abbiamo fatto questo per mostrarti come funziona useMemo, ma in questo caso, non è necessario memorizzare il material. React Three Fiber esegue già le ottimizzazioni necessarie per noi.

I casi in cui useMemo può essere utile sono:

• Quando un valore è costoso da calcolare su un componente che esegue il rendering frequentemente.
• Quando un componente ha molti figli e vuoi evitare di renderizzarli di nuovo.
• Quando un componente ha molte props e vuoi evitare di renderizzarlo di nuovo.

Non utilizzare useMemo per ottimizzazioni premature quando inizi con React e r3f. Può essere complicato da usare e può portare a bug. Preferisci usarlo quando hai problemi di prestazioni.

useRef

useRef consente di creare un valore mutabile che persiste tra i render.

È comunemente utilizzato per memorizzare un riferimento a un elemento DOM o a un oggetto Three.js, ma puoi usarlo per memorizzare qualsiasi valore.

La cosa positiva di useRef è che non innesca un re-render quando il suo valore cambia. Con r3f, è perfetto per animazioni o qualsiasi valore che cambia frequentemente.