Mengapakah useEffect Dijalankan pada Initial Render dalam React?

Cara Menghalang useEffect Hook daripada Berjalan pada Initial Render

Dokumentasi React menyatakan bahawa kaedah kitaran hayat componentDidUpdate() tidak digunakan semasa render awal. Walau bagaimanapun, apabila menggunakan cangkuk useEffect untuk mensimulasikan componentDidUpdate(), ia kelihatan berjalan pada setiap pemaparan, termasuk yang pertama.

Penjelasan

Cangkuk useEffect dijalankan selepas setiap kitaran render, termasuk yang awal. Tidak seperti kaedah componentDidUpdate(), ia tidak mempunyai semakan terbina dalam untuk melangkau larian pertama.

Penyelesaian

Terdapat dua pendekatan untuk menangani perkara ini:

1. Menggunakan useRef

Kita boleh menggunakan cangkuk useRef untuk menjejaki sama ada ini kali pertama fungsi useEffect dipanggil.

const isFirstRender = useRef(true);

useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return; // Skip the first render
  }

  console.log("Component did update");
}, [<dependencies>]);

2. Menggunakan useLayoutEffect

useLayoutEffect adalah serupa dengan useEffect, tetapi ia berjalan dalam fasa yang sama seperti componentDidUpdate(), yang berlaku selepas operasi DOM.

useLayoutEffect(() => {
  console.log("Component did update");
}, [<dependencies>]);

Atas ialah kandungan terperinci Mengapakah useEffect Dijalankan pada Initial Render dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!