Veamos con React Three Fiber qué React hooks usaremos comúnmente y cómo usarlos evitando errores comunes.

Si no estás familiarizado con los hooks de React, te recomiendo leer primero la documentación oficial.

useState

useState te permite crear una variable de estado y una función para actualizarla.

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

Devuelve un array con dos elementos:

• la variable de estado
• la función para actualizarla.

Puedes usarlo así:

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

// ...

Cada vez que haces clic en uno de los botones, el color del cubo cambia.

Debido a que actualizar el estado desencadena una re-renderización, debes evitar llamar a useState dentro de un bucle o una condición.

Veremos la forma correcta de hacer actualizaciones frecuentes con r3f en la lección de React Three Fiber hooks, y discutiremos los errores comunes a evitar en la lección de optimización.

Por el momento, aquí hay algunas reglas generales con useState:

• Evita llamar a useState para valores que cambian rápidamente.
• Úsalo en el nivel más profundo posible. De esa manera, evitarás re-renderizar elementos que no necesitan ser re-renderizados.

useMemo

useMemo te permite memoizar un valor. Esto significa que el valor se calculará solo cuando sus dependencias hayan cambiado.

Reemplacemos nuestro material por uno memoizado:

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

// ...

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

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

// ...

• El primer argumento es una función que devuelve el valor a memoizar. En nuestro caso, es un componente de material.
• El segundo argumento es un array de dependencias. Pasamos un array vacío, lo que significa que el material se calculará solo una vez.
• El valor devuelto es el valor memoizado.

Ahora, cuando hacemos clic en los botones, el color del cubo no cambia, porque el material no se vuelve a calcular.

Para solucionar esto, necesitamos pasar el color como una dependencia:

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

Ahora, cuando hacemos clic en los botones, el color del cubo cambia, porque el material se vuelve a calcular cuando el estado color cambia.

Hicimos esto para mostrarte cómo funciona useMemo, pero en este caso, no es necesario memoizar el material. React Three Fiber ya hace las optimizaciones necesarias por nosotros.

Casos donde useMemo puede ser beneficioso son:

• Cuando un valor es costoso de calcular en un componente que se renderiza con frecuencia.
• Cuando un componente tiene muchos hijos y quieres evitar renderizarlos de nuevo.
• Cuando un componente tiene muchas props y quieres evitar renderizarlo de nuevo.

No uses useMemo para la optimización prematura cuando empieces con React y r3f. Puede ser complicado de usar y puede llevar a errores. Prefiere usarlo cuando tengas problemas de rendimiento.

useRef

useRef te permite crear un valor mutable que persiste a lo largo de los renders.

Se usa comúnmente para almacenar una referencia a un elemento DOM o un objeto de Three.js pero se puede usar para almacenar cualquier valor.

Lo bueno de useRef es que no desencadena un re-render cuando su valor cambia. Con r3f, esto es perfecto para animaciones o cualquier valor que cambie frecuentemente.