Vamos ver com o React Three Fiber quais React hooks usaremos comumente e como usá-los evitando armadilhas comuns.

Se você não está familiarizado com hooks do React, recomendo que leia primeiro a documentação oficial.

useState

useState permite criar uma variável de estado e uma função para atualizá-la.

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

Ele retorna um array com dois elementos:

• a variável de estado
• a função para atualizá-la.

Você pode usá-lo assim:

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

// ...

Toda vez que você clica em um dos botões, a cor do cubo muda.

Como atualizar o estado aciona um re-render, você deve evitar chamar useState dentro de um loop ou uma condição.

Veremos a maneira correta de fazer atualizações frequentes com r3f na lição de React Three Fiber hooks e discutiremos os erros comuns a evitar na lição de otimização.

Por enquanto, aqui estão algumas regras gerais para useState:

• Evite chamar useState para valores que mudam rapidamente.
• Use-o no nível mais profundo possível. Dessa forma, você evitará re-renderizar itens que não precisam ser re-renderizados.

useMemo

useMemo permite memoizar um valor. Isso significa que o valor será computado apenas quando suas dependências tiverem mudado.

Vamos substituir nosso material por um material memoizado:

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

// ...

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

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

// ...

• O primeiro argumento é uma função que retorna o valor a ser memoizado. No nosso caso, é um componente de material.
• O segundo argumento é um array de dependências. Passamos um array vazio, o que significa que o material será computado apenas uma vez.
• O valor retornado é o valor memoizado.

Agora, quando clicamos nos botões, a cor do cubo não muda, porque o material não é re-computado.

Para resolver isso, precisamos passar a color como uma dependência:

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

Agora, quando clicamos nos botões, a cor do cubo muda, porque o material é re-computado quando o estado de color muda.

Fizemos isso para mostrar como useMemo funciona, mas neste caso, não é necessário memoizar o material. React Three Fiber já faz as otimizações necessárias para nós.

Casos onde useMemo pode ser benéfico são:

• Quando um valor é custoso de computar em um componente que renderiza frequentemente.
• Quando um componente tem muitos filhos e você quer evitar re-renderizá-los.
• Quando um componente tem muitas props e você quer evitar re-renderizá-lo.

Não use useMemo para otimização prematura quando começar com React e r3f. Pode ser complicado de usar e levar a bugs. Prefira usá-lo quando tiver problemas de performance.

useRef

useRef permite criar um valor mutável que persiste através das renderizações.

É comumente usado para armazenar uma referência a um elemento DOM ou a um objeto Three.js, mas você pode usá-lo para armazenar qualquer valor.

A grande vantagem do useRef é que ele não dispara uma re-renderização quando seu valor muda. Com r3f, isso é perfeito para animações ou qualquer valor que muda frequentemente.