Mari kita lihat dengan React Three Fiber hook React apa yang akan kita gunakan secara umum dan bagaimana menggunakannya sambil menghindari kesalahan umum.

Jika Anda tidak akrab dengan React hooks, saya sarankan membaca dokumentasi resmi terlebih dahulu.

useState

useState memungkinkan Anda untuk membuat variabel state dan fungsi untuk memperbaruinya.

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

Ini mengembalikan array dengan dua elemen:

• variabel state
• fungsi untuk memperbaruinya.

Anda dapat menggunakannya seperti ini:

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

// ...

Setiap kali Anda mengklik salah satu tombol, warna kubus berubah.

Karena memperbarui state memicu re-render, Anda harus menghindari memanggil useState di dalam loop atau kondisi.

Kami akan melihat cara yang baik untuk melakukan pembaruan yang sering dengan r3f dalam pelajaran React Three Fiber hooks, dan mendiskusikan kesalahan umum yang harus dihindari dalam pelajaran optimasi.

Untuk saat ini, berikut adalah beberapa aturan praktis dengan useState:

• Hindari memanggil useState untuk nilai yang cepat berubah.
• Gunakan pada tingkat paling dalam yang mungkin. Dengan cara ini, Anda akan menghindari me-render ulang item yang tidak perlu di-render ulang.

useMemo

useMemo memungkinkan Anda untuk memoize sebuah nilai. Ini berarti bahwa nilai tersebut akan dihitung hanya ketika dependencies berubah.

Mari kita ganti material kita dengan yang telah di-memoize:

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

// ...

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

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

// ...

• Argumen pertama adalah fungsi yang mengembalikan nilai yang akan di-memoize. Dalam kasus kita, ini adalah sebuah komponen material.
• Argumen kedua adalah array dari dependencies. Kita mengoper sebuah array kosong, yang berarti bahwa material akan dihitung hanya sekali.
• Nilai yang dikembalikan adalah nilai yang telah di-memoize.

Sekarang, ketika kita klik tombol, warna kubus tidak berubah, karena material tidak dihitung ulang.

Untuk memperbaikinya, kita perlu mengoper color sebagai dependency:

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

Sekarang, ketika kita klik tombol, warna kubus berubah, karena material dihitung ulang saat state color berubah.

Kami melakukan ini untuk menunjukkan cara useMemo bekerja, tetapi dalam kasus ini, tidak perlu untuk memoize material. React Three Fiber sudah melakukan optimasi yang diperlukan untuk kita.

Kasus di mana useMemo bisa bermanfaat adalah:

• Ketika sebuah nilai mahal untuk dihitung pada sebuah komponen yang sering di-render.
• Ketika sebuah komponen memiliki banyak children dan Anda ingin menghindari re-render pada mereka.
• Ketika sebuah komponen memiliki banyak props dan Anda ingin menghindari re-render padanya.

Jangan gunakan useMemo untuk optimasi prematur ketika Anda baru memulai dengan React dan r3f. Ini bisa rumit untuk digunakan dan bisa menimbulkan bug. Lebih disarankan menggunakannya ketika Anda memiliki masalah performa.

useRef

useRef memungkinkan Anda untuk membuat nilai yang dapat berubah yang bertahan di seluruh render.

Ini biasanya digunakan untuk menyimpan referensi ke elemen DOM atau objek Three.js tetapi Anda dapat menggunakannya untuk menyimpan nilai apa pun.

Hal baik tentang useRef adalah tidak memicu re-render ketika nilainya berubah. Dengan r3f, ini sempurna untuk animasi atau nilai apa pun yang sering berubah.