Kedua-duanya menjalankan effects, tetapi pada momen berbeza berbanding dengan cat pelayar — dan perbezaan masa ini adalah keseluruhan perkara.
useEffect berjalan selepas pelayar telah dicat. Ia adalah asinkron dan tidak menghalang. Gunakan untuk hampir semua perkara (data, langganan, pengelogan).useLayoutEffect berjalan . Gunakan apabila anda mesti membaca tata letak dan mengubah DOM dalam bingkai yang sama untuk mengelakkan kedipan yang kelihatan.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Bayangkan mengukur elemen dan meletakkan semula tooltip berdasarkan saiznya. Dengan useEffect, pengguna akan melihat tooltip di tempat yang salah seketika, kemudian ia melompat:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Dengan useEffect, kod yang sama berjalan selepas cat → kedipan satu bingkai.
useLayoutEffect membuat UI terasa tersentak, kerana pelayar tidak dapat melukis sehingga ia selesai.Peraturan praktikal: lalai ke useEffect; hanya gunakan useLayoutEffect untuk pengukuran/mutasi DOM sinkron yang sebaliknya akan kedip.