useEffect

useEffect(setup, dependencies?)

• Referensi
  • useEffect(setup, dependencies?)
• Penggunaan
  • Menghubungkan ke sistem eksternal
  • Membungkus Effect dalam Hook kustom
  • Mengontrol widget non-React
  • Mengambil data dengan Effects
  • Menentukan dependensi yang responsif
  • Memperbarui state berdasarkan state sebelumnya dari sebuah Effect
  • Menghapus dependensi objek yang tidak diperlukan
  • Menghapus dependensi fungsi yang tidak perlu
  • Membaca props dan state terbaru dari sebuah Effect
  • Menampilkan konten yang berbeda di server dan klien
• Penyelesaian masalah
  • Effect Anda berjalan dua kali saat komponen terpasang
  • Effect Anda berjalan setelah setiap render ulang
  • Effect Anda terus berjalan dalam siklus tak terbatas
  • Logika cleanup Anda berjalan meskipun komponen Anda tidak dilepas
  • Effect Anda melakukan sesuatu yang visual, dan Anda melihat kedipan sebelum berjalan

Referensi

useEffect(setup, dependencies?)

Panggil useEffect di level atas komponen Anda untuk mendeklarasikan sebuah Effect:

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

Lihat lebih banyak contoh di bawah ini.

Parameter

• setup: Fungsi dengan logika Effect Anda. Fungsi setup Anda juga dapat secara opsional mengembalikan fungsi cleanup. Ketika komponen Anda pertama kali ditambahkan ke DOM, React akan menjalankan fungsi setup Anda. Setelah setiap re-render dengan dependensi yang berubah, React akan pertama-tama menjalankan fungsi cleanup (jika Anda menyediakannya) dengan nilai lama, dan kemudian menjalankan fungsi setup Anda dengan nilai baru. Setelah komponen Anda dihapus dari DOM, React akan menjalankan fungsi cleanup Anda untuk terakhir kalinya.

• dependensi opsional: Daftar semua nilai reaktif yang direferensikan di dalam kode setup. Nilai reaktif meliputi props, state, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam body komponen Anda. Jika linter Anda dikonfigurasi untuk React, itu akan memverifikasi bahwa setiap nilai reaktif dijelaskan dengan benar sebagai dependensi. Daftar dependensi harus memiliki jumlah item yang konstan dan ditulis secara inline seperti [dep1, dep2, dep3]. React akan membandingkan setiap dependensi dengan nilai sebelumnya menggunakan perbandingan Object.is . Jika Anda mengabaikan argumen ini, Effect Anda akan berjalan ulang setelah setiap re-render dari komponen. Lihat perbedaan antara melewatkan array dependensi, array kosong, dan tidak ada dependensi sama sekali.

Kembalian

useEffect mengembalikan undefined.

Catatan Penting

• useEffect adalah Hook, sehingga Anda hanya dapat memanggilnya di level atas komponen Anda atau Hook Anda sendiri. Anda tidak dapat memanggilnya di dalam loop atau kondisi. Jika Anda membutuhkannya, ekstraklah komponen baru dan pindahkan state ke dalamnya.

• Jika Anda tidak mencoba untuk menyinkronkan dengan sistem eksternal tertentu, kemungkinan Anda tidak memerlukan sebuah Effect.

• Ketika Strict Mode diaktifkan, React akan menjalankan satu siklus setup+cleanup tambahan hanya untuk pengembangan sebelum setup sebenarnya yang pertama. Ini adalah stress-test yang memastikan bahwa logika cleanup Anda “mencerminkan” logika setup Anda dan menghentikan atau membatalkan apa pun yang dilakukan setup. Jika ini menyebabkan masalah, implementasikan fungsi cleanup.

• Jika beberapa dependensi Anda adalah objek atau fungsi yang didefinisikan di dalam komponen, ada risiko bahwa mereka akan membuat Effect berjalan ulang lebih sering dari yang diperlukan. Untuk mengatasinya, hapus dependensi objek dan fungsi yang tidak diperlukan. Anda juga dapat mengekstrak pembaruan state dan logika non-reaktif di luar Effect Anda.

• Jika Effect Anda tidak disebabkan oleh interaksi (seperti klik), React dapat menjalankan Effect Anda sebelum browser menampilkan layar yang diperbarui. Ini memastikan bahwa hasil Effect dapat diamati oleh sistem event. Biasanya, ini berfungsi seperti yang diharapkan. Namun, jika Anda harus menunda pekerjaan hingga setelah penggambaran, seperti alert(), Anda dapat menggunakan setTimeout. Lihat reactwg/react-18/128 untuk informasi lebih lanjut.

• Meskipun Effect Anda disebabkan oleh interaksi (seperti klik), React dapat mengizinkan browser untuk menggambar ulang layar sebelum memproses pembaruan state di dalam Efek Anda. Biasanya, ini berfungsi seperti yang diharapkan. Namun, jika Anda harus memblokir browser agar tidak menggambar ulang layar, Anda perlu mengganti useEffect dengan useLayoutEffect.

• Effect hanya berjalan di sisi klien. Ia tidak akan berjalan selama rendering di server.

Penggunaan

Menghubungkan ke sistem eksternal

Beberapa komponen perlu terhubung dengan jaringan, beberapa API browser, atau perpustakaan pihak ketiga, saat ditampilkan pada halaman. Sistem-sistem ini tidak dikendalikan oleh React, sehingga disebut sebagai sistem eksternal.

Untuk menghubungkan komponen Anda ke sistem eksternal, panggil useEffect pada level atas komponen Anda:

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
  	const connection = createConnection(serverUrl, roomId);
    connection.connect();
  	return () => {
      connection.disconnect();
  	};
  }, [serverUrl, roomId]);
  // ...
}

Anda perlu melewatkan dua argumen ke useEffect:

1. Sebuah fungsi setup dengan kode setup yang menghubungkan ke sistem tersebut.
   • Fungsi tersebut harus mengembalikan sebuah fungsi cleanup dengan kode cleanup yang memutus koneksi dari sistem tersebut.
2. Sebuah daftar dependensi termasuk setiap nilai dari komponen Anda yang digunakan di dalam fungsi-fungsi tersebut.

React memanggil fungsi setup dan cleanup Anda kapan saja diperlukan, yang mungkin terjadi beberapa kali:

1. Kode setup Anda dijalankan ketika komponen Anda ditambahkan ke halaman (mounts).
2. Setelah setiap re-render dari komponen Anda di mana dependensi telah berubah:
   • Pertama, kode cleanup Anda dijalankan dengan props dan state yang lama.
   • Kemudian, kode setup Anda dijalankan dengan props dan state yang baru.
3. Kode cleanup Anda dijalankan satu kali terakhir setelah komponen Anda dihapus dari halaman (unmounts).

Mari ilustrasikan urutan ini untuk contoh di atas.

Ketika komponen ChatRoom di atas ditambahkan ke halaman, itu akan terhubung ke ruang obrolan dengan serverUrl dan roomId awal. Jika salah satu dari serverUrl atau roomId berubah sebagai hasil dari re-render (misalnya, jika pengguna memilih ruang obrolan yang berbeda dalam dropdown), Effect Anda akan memutuskan koneksi dari ruang sebelumnya, dan terhubung ke yang berikutnya. Ketika komponen ChatRoom dihapus dari halaman, Effect Anda akan memutuskan koneksi satu kali terakhir.

Untuk membantu Anda menemukan bug, dalam pengembangan React menjalankan setup dan cleanup satu kali ekstra sebelum setup. Ini adalah pengujian stress-test yang memverifikasi logika Effect Anda diimplementasikan dengan benar. Jika ini menyebabkan masalah yang terlihat, fungsi cleanup Anda kekurangan beberapa logika. Fungsi cleanup harus menghentikan atau membatalkan apa yang dilakukan oleh fungsi setup. Aturan praktisnya adalah bahwa pengguna tidak boleh dapat membedakan antara setup yang dipanggil sekali (seperti di produksi) dan urutan setup → cleanup → setup (seperti di pengembangan). Lihat solusi umum.

Cobalah untuk menulis setiap Effect sebagai proses independen dan berpikir tentang satu siklus setup/cleanup pada suatu waktu. Tidak harus masalah apakah komponen Anda sedang mounting, updating, atau unmounting. Ketika logika cleanup Anda “mencerminkan” logika setup dengan benar, Effect Anda tangguh terhadap menjalankan setup dan cleanup sesering yang diperlukan.

Membungkus Effect dalam Hook kustom

Effects adalah “pintu darurat”: Anda menggunakannya ketika Anda perlu “keluar dari React” dan ketika tidak ada solusi bawaan yang lebih baik untuk kasus penggunaan Anda. Jika Anda sering perlu menulis Effects secara manual, itu biasanya menjadi tanda bahwa Anda perlu mengekstrak beberapa custom Hooks untuk perilaku umum yang dibutuhkan komponen Anda.

Misalnya, custom Hook useChatRoom ini “menyembunyikan” logika Effect Anda di balik API yang lebih deklaratif:

function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Lalu kamu bisa menggunakannya dari komponen mana pun seperti ini:

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

Ada juga banyak custom Hooks yang sangat bagus untuk setiap tujuan yang tersedia di ekosistem React.

Pelajari lebih lanjut tentang cara mengelompokkan Effects ke dalam Custom Hooks.

Mengontrol widget non-React

Terkadang, Anda ingin menjaga sistem eksternal tetap disinkronkan dengan beberapa prop atau state dari komponen React Anda.

Misalnya, jika Anda memiliki widget peta pihak ketiga atau komponen pemutar video yang ditulis tanpa React, Anda dapat menggunakan Effect untuk memanggil metode pada widget tersebut yang membuat state sesuai dengan state saat ini dari komponen React Anda. Effect ini menciptakan sebuah instance dari kelas MapWidget yang didefinisikan dalam map-widget.js. Ketika Anda mengubah prop zoomLevel dari komponen Map, Effect memanggil setZoom() pada instance kelas untuk menjaganya tetap disinkronkan:

Pada contoh ini, sebuah fungsi cleanup tidak diperlukan karena kelas MapWidget hanya mengelola node DOM yang diberikan kepadanya. Setelah komponen Map React dihapus dari pohon(tree), baik node DOM maupun instance kelas MapWidget akan otomatis dihapus oleh mesin JavaScript pada browser.

Mengambil data dengan Effects

Anda dapat menggunakan sebuah Effect untuk mengambil data untuk komponen Anda. Perlu diingat bahwa jika Anda menggunakan sebuah framework, menggunakan mekanisme pengambilan data dari framework Anda akan jauh lebih efisien daripada menulis Effects secara manual.

Jika Anda ingin mengambil data dari sebuah Effect secara manual, kode Anda mungkin akan terlihat seperti ini:

import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);

  useEffect(() => {
    let ignore = false;
    setBio(null);
    fetchBio(person).then(result => {
      if (!ignore) {
        setBio(result);
      }
    });
    return () => {
      ignore = true;
    };
  }, [person]);

  // ...

Perhatikan variabel ignore yang diinisialisasi dengan nilai false dan diatur menjadi true selama cleanup. Ini memastikan kode Anda tidak mengalami “race conditions”: respon jaringan dapat tiba dalam urutan yang berbeda dari yang Anda kirimkan.

Anda juga dapat menulis kode dengan menggunakan sintaksis async / await, namun Anda masih perlu menyediakan fungsi cleanup:

Menulis pengambilan data langsung di Effects menjadi repetitif dan sulit untuk menambahkan optimasi seperti caching dan server rendering nanti. Lebih mudah untuk menggunakan Custom Hook - baik yang Anda buat sendiri atau yang dipelihara oleh komunitas.

Menentukan dependensi yang responsif

Perhatikan bahwa Anda tidak dapat “memilih” dependensi dari Effect Anda. Setiap nilai reaktif yang digunakan oleh kode Effect Anda harus dideklarasikan sebagai dependensi. Daftar dependensi Effect Anda ditentukan oleh kode sekitarnya:

function ChatRoom({ roomId }) { // This is a reactive value
  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // This is a reactive value too

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // This Effect reads these reactive values
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]); // ✅ So you must specify them as dependencies of your Effect
  // ...
}

Jika serverUrl atau roomId berubah, Effect Anda akan menyambung kembali ke obrolan menggunakan nilai baru.

Nilai reaktif mencakup props dan semua variabel dan fungsi yang dideklarasikan langsung di dalam komponen Anda. Karena roomId dan serverUrl adalah nilai reaktif, Anda tidak dapat menghapusnya dari dependensi. Jika Anda mencoba menghilangkannya dan linter Anda dikonfigurasi dengan benar untuk React, linter akan menandai ini sebagai kesalahan yang perlu Anda perbaiki:

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
  
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, []); // 🔴 React Hook useEffect has missing dependencies: 'roomId' and 'serverUrl'
  // ...
}

Untuk menghapus sebuah dependensi, Anda perlu “membuktikan” pada linter bahwa itu tidak perlu menjadi sebuah dependensi. Misalnya, Anda dapat memindahkan serverUrl keluar dari komponen Anda untuk membuktikan bahwa itu tidak reaktif dan tidak akan berubah pada saat re-render:

const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared
  // ...
}

Sekarang serverUrl bukan lagi sebuah nilai yang reaktif (dan tidak bisa berubah pada re-render), sehingga tidak perlu menjadi dependensi. Jika kode Effect Anda tidak menggunakan nilai yang reaktif, daftar dependensinya harus kosong ([]):

const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore
const roomId = 'music'; // Not a reactive value anymore

function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, []); // ✅ All dependencies declared
  // ...
}

Sebuah Effect dengan daftar dependencies kosong tidak akan dijalankan ulang ketika props atau state dari komponen berubah.

useEffect(() => {
  // ...
  // 🔴 Avoid suppressing the linter like this:
  // eslint-ignore-next-line react-hooks/exhaustive-deps
}, []);

Memperbarui state berdasarkan state sebelumnya dari sebuah Effect

Ketika Anda ingin memperbarui state berdasarkan state sebelumnya dari sebuah Effect, Anda mungkin akan menghadapi masalah:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // You want to increment the counter every second...
    }, 1000)
    return () => clearInterval(intervalId);
  }, [count]); // 🚩 ... but specifying `count` as a dependency always resets the interval.
  // ...
}

Karena count adalah nilai reaktif, ia harus disebutkan dalam daftar dependensi. Namun, hal ini menyebabkan Effect cleanup dan mengatur ulang setiap kali count berubah. Ini tidak ideal.

Untuk mengatasinya, oper pembaruan status c => c + 1 ke setCount:

Sekarang bahwa Anda mengoper c => c + 1 bukan count + 1, Effect Anda tidak lagi perlu tergantung pada count. Sebagai hasil dari perbaikan ini, ia tidak perlu cleanup dan mengatur interval lagi setiap kali count berubah.

Menghapus dependensi objek yang tidak diperlukan

Jika Effect Anda bergantung pada objek atau fungsi yang dibuat selama rendering, mungkin berjalan terlalu sering. Misalnya, Effect ini terhubung kembali setelah setiap render karena objek opsi berbeda untuk setiap render:

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  const options = { // 🚩 This object is created from scratch on every re-render
    serverUrl: serverUrl,
    roomId: roomId
  };

  useEffect(() => {
    const connection = createConnection(options); // It's used inside the Effect
    connection.connect();
    return () => connection.disconnect();
  }, [options]); // 🚩 As a result, these dependencies are always different on a re-render
  // ...

Hindari menggunakan objek yang dibuat selama rendering sebagai dependensi. Sebaliknya, buat objek di dalam Effect:

Sekarang setelah Anda membuat objek opsi di dalam Effect, Effect itu sendiri hanya tergantung pada string roomId.

Dengan perbaikan ini, mengetik ke dalam input tidak akan menyambungkan kembali ke chat. Berbeda dengan objek yang dibuat ulang, string seperti roomId tidak berubah kecuali Anda menetapkannya ke nilai lain. Baca lebih lanjut tentang menghapus dependensi.

Menghapus dependensi fungsi yang tidak perlu

Jika Effect Anda bergantung pada objek atau fungsi yang dibuat selama rendering, maka Effect tersebut mungkin akan berjalan terlalu sering. Misalnya, Effect ini akan terhubung kembali setelah setiap rendering karena fungsi createOptions berbeda untuk setiap rendering:

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  function createOptions() { // 🚩 This function is created from scratch on every re-render
    return {
      serverUrl: serverUrl,
      roomId: roomId
    };
  }

  useEffect(() => {
    const options = createOptions(); // It's used inside the Effect
    const connection = createConnection();
    connection.connect();
    return () => connection.disconnect();
  }, [createOptions]); // 🚩 As a result, these dependencies are always different on a re-render
  // ...

Jika hanya membuat sebuah fungsi dari awal pada setiap re-render, itu bukan masalah yang perlu dioptimalkan. Namun, jika Anda menggunakannya sebagai dependensi dari Effect Anda, maka akan menyebabkan Effect Anda berjalan kembali setelah setiap re-render.

Hindari menggunakan sebuah fungsi yang dibuat selama rendering sebagai dependensi. Sebaiknya, deklarasikan fungsi tersebut di dalam Effect:

Sekarang, Anda mendefinisikan fungsi createOptions di dalam Effect, sehingga Effect itu sendiri hanya tergantung pada string roomId. Dengan perbaikan ini, mengetik ke dalam input tidak akan membuat chat terhubung kembali. Berbeda dengan sebuah fungsi yang selalu dibuat ulang, sebuah string seperti roomId tidak berubah kecuali jika Anda menetapkannya ke nilai lain. Baca lebih lanjut tentang cara menghapus dependensi.

Membaca props dan state terbaru dari sebuah Effect

Secara default, ketika Anda membaca sebuah nilai reaktif dari sebuah Effect, Anda harus menambahkannya sebagai sebuah dependensi. Hal ini memastikan bahwa *Effect Anda “bereaksi” terhadap setiap perubahan dari nilai tersebut. Untuk sebagian besar dependensi, itulah perilaku yang Anda inginkan.

Namun, terkadang Anda akan ingin membaca props dan state terbaru dari sebuah Effect tanpa “bereaksi” terhadapnya. Sebagai contoh, bayangkan Anda ingin mencatat jumlah item dalam keranjang belanja untuk setiap kunjungan halaman:

function Page({ url, shoppingCart }) {
  useEffect(() => {
    logVisit(url, shoppingCart.length);
  }, [url, shoppingCart]); // ✅ All dependencies declared
  // ...
}

Bagaimana jika Anda ingin mencatat kunjungan halaman baru setelah setiap perubahan url, tetapi tidak jika hanya shoppingCart yang berubah? Anda tidak dapat mengabaikan shoppingCart dari dependensi tanpa melanggar aturan reaktivitas. Namun, Anda dapat menyatakan bahwa Anda “tidak ingin” suatu kode “bereaksi” terhadap perubahan meskipun itu dipanggil dari dalam sebuah Effect. Deklarasikan sebuah Effect Event dengan useEffectEvent Hook, dan pindahkan kode yang membaca shoppingCart ke dalamnya:

function Page({ url, shoppingCart }) {
  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, shoppingCart.length)
  });

  useEffect(() => {
    onVisit(url);
  }, [url]); // ✅ All dependencies declared
  // ...
}

Effect Events tidak bersifat reaktif dan selalu harus diabaikan dari ketergantungan Effect Anda. Inilah yang memungkinkan Anda menempatkan kode non-reaktif (di mana Anda dapat membaca nilai terbaru dari beberapa props dan state) di dalamnya. Dengan membaca shoppingCart di dalam onVisit, Anda memastikan bahwa shoppingCart tidak akan menjalankan kembali Effect Anda.

Baca lebih lanjut tentang bagaimana Effect Events memungkinkan Anda memisahkan kode yang reaktif dan non-reaktif.

Menampilkan konten yang berbeda di server dan klien

Jika aplikasi Anda menggunakan server rendering (baik langsung maupun melalui framework), komponen Anda akan dirender di dua lingkungan yang berbeda. Di server, komponen akan dirender untuk menghasilkan HTML awal. Di klien, React akan menjalankan kode rendering lagi sehingga ia dapat melekatkan event handler Anda ke HTML tersebut. Oleh karena itu, agar hydrasi berfungsi, output render awal Anda harus identik di klien dan server.

Dalam kasus yang jarang terjadi, Anda mungkin perlu menampilkan konten yang berbeda di klien. Misalnya, jika aplikasi Anda membaca beberapa data dari localStorage, maka hal itu tidak mungkin dilakukan di server. Berikut adalah cara mengimplementasikannya:

function MyComponent() {
  const [didMount, setDidMount] = useState(false);

  useEffect(() => {
    setDidMount(true);
  }, []);

  if (didMount) {
    // ... return client-only JSX ...
  }  else {
    // ... return initial JSX ...
  }
}

Ketika aplikasi sedang dimuat, pengguna akan melihat output render awal. Kemudian, setelah aplikasi selesai dimuat dan dihydrate, Effect akan berjalan dan mengatur didMount menjadi true, memicu re-render. Ini akan beralih ke output render khusus client. Effect tidak berjalan di server, itulah sebabnya didMount bernilai false selama render awal di server.

Gunakan pola ini dengan bijak. Ingatlah bahwa pengguna dengan koneksi lambat akan melihat konten awal untuk waktu yang cukup lama - potensial, beberapa detik - jadi Anda tidak ingin membuat perubahan yang terlalu drastis pada tampilan komponen Anda. Dalam banyak kasus, Anda dapat menghindari kebutuhan ini dengan menunjukkan hal-hal yang berbeda secara kondisional dengan CSS.

Penyelesaian masalah

Effect Anda berjalan dua kali saat komponen terpasang

Ketika Strict Mode aktif di pengembangan, React menjalankan setup dan cleanup satu kali ekstra sebelum setup sebenarnya.

Ini adalah stress-test yang memverifikasi logika Effect Anda diimplementasikan dengan benar. Jika ini menyebabkan masalah yang terlihat, fungsi cleanup Anda kehilangan beberapa logika. Fungsi cleanup harus menghentikan atau membatalkan apa pun yang dilakukan fungsi setup. Aturan praktisnya adalah pengguna tidak boleh dapat membedakan antara setup yang dipanggil sekali (seperti dalam produksi) dan urutan setup → cleanup → setup (seperti dalam pengembangan).

Baca lebih lanjut tentang bagaimana ini membantu menemukan bug dan cara memperbaiki logika Anda.

Effect Anda berjalan setelah setiap render ulang

Pertama, periksa apakah Anda telah lupa untuk menentukan array dependensi:

useEffect(() => {
  // ...
}); // 🚩 No dependency array: re-runs after every render!

Jika Anda telah menentukan array dependensi tetapi Effect Anda masih berjalan dalam loop, itu karena salah satu dependensi Anda berbeda pada setiap re-render.

Anda dapat men-debug masalah ini dengan secara manual mencatat dependensi Anda ke konsol:

  useEffect(() => {
    // ..
  }, [serverUrl, roomId]);

  console.log([serverUrl, roomId]);

Anda dapat mengklik kanan pada array dari re-render yang berbeda di konsol dan pilih “Simpan sebagai variabel global” untuk keduanya. Anda kemudian dapat menggunakan konsol browser untuk memeriksa apakah setiap dependensi dalam kedua array tersebut sama:

Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...

Ketika Anda menemukan dependensi yang berbeda pada setiap re-render, biasanya Anda bisa memperbaikinya dengan salah satu cara berikut:

• Memperbarui state berdasarkan state sebelumnya dari sebuah Effect
• Menghapus dependensi objek yang tidak diperlukan
• Menghapus dependensi fungsi yang tidak diperlukan
• Membaca props dan state terbaru dari sebuah Effect

Sebagai upaya terakhir (jika metode-metode ini tidak membantu), bungkus pembuatannya dengan useMemo atau useCallback (untuk fungsi).

Effect Anda terus berjalan dalam siklus tak terbatas

Jika Effect Anda berjalan dalam siklus tak terbatas, dua hal ini harus benar:

• Effect Anda memperbarui beberapa state.
• State tersebut menyebabkan re-render, yang menyebabkan dependensi Effect berubah.

Sebelum Anda mulai memperbaiki masalah, tanyakan pada diri sendiri apakah Effect Anda terhubung ke sistem eksternal tertentu (seperti DOM, jaringan, widget pihak ketiga, dan sebagainya). Mengapa Effect Anda perlu menetapkan state? Apakah itu disinkronkan dengan sistem eksternal tersebut? Atau apakah Anda mencoba mengelola aliran data aplikasi Anda dengannya?

Jika tidak ada sistem eksternal, pertimbangkan untuk menghapus Effect sama sekali untuk menyederhanakan logika Anda.

Jika Anda benar-benar menyinkronkan dengan sistem eksternal, pertimbangkan mengapa dan dalam kondisi apa Effect Anda harus memperbarui state. Apakah ada sesuatu yang berubah yang mempengaruhi output visual komponen Anda? Jika Anda perlu melacak beberapa data yang tidak digunakan untuk merender, ref(yang tidak memicu re-render) mungkin lebih sesuai. Verifikasi bahwa Effect Anda tidak memperbarui state (dan memicu re-render) lebih dari yang dibutuhkan.

Akhirnya, jika Effect Anda memperbarui state pada waktu yang tepat, tetapi masih ada loop, itu karena pembaruan state tersebut menyebabkan salah satu dependensi Effect berubah. Baca cara memecahkan masalah perubahan dependensi.

Logika cleanup Anda berjalan meskipun komponen Anda tidak dilepas

Fungsi cleanup berjalan tidak hanya saat bongkar pasang, tetapi sebelum setiap re-render dengan dependensi yang berubah. Selain itu, dalam pengembangan, React menjalankan setup + cleanup satu kali tambahan segera setelah komponen dipasang.

Jika Anda memiliki kode cleanup tanpa kode setup yang sesuai, biasanya itu adalah tanda masalah dalam kode:

useEffect(() => {
  // 🔴 Avoid: Cleanup logic without corresponding setup logic
  return () => {
    doSomething();
  };
}, []);

Logika cleanup Anda harus “simetris” dengan logika setup awal, dan harus menghentikan atau mengembalikan apa yang dilakukan oleh setup awal:

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);

Pelajari bagaimana siklus hidup Effect berbeda dari siklus hidup komponen.

Effect Anda melakukan sesuatu yang visual, dan Anda melihat kedipan sebelum berjalan

Jika Effect Anda harus menghalangi browser agar tidak mengecat layar, ganti useEffect dengan useLayoutEffect. Perhatikan bahwa ini seharusnya tidak diperlukan untuk sebagian besar Effect. Anda hanya memerlukannya jika sangat penting untuk menjalankan Effect Anda sebelum browser melukis: misalnya, untuk mengukur dan memposisikan tooltip sebelum pengguna melihatnya.