Loro-lorone menjalankan effects, nanging ing moment beda relatif kanggo browser paint — lan bedane timing iku kabeh pointé.
useEffect menjalankan sawise browser wis nglukis. Iku asynchronous lan non-blocking. Gunakna kanggo meh kabeh bab (data, subscriptions, logging).useLayoutEffect menjalankan synchronously sawise DOM dimutasi nanging SADURUNGE browser nglukis. Gunakna yen sampeyan kudu maca layout lan ngganti DOM ing frame sing padha kanggo ngilangi flicker sing katon.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Bayangna ngukur elemen lan ngener manèh tooltip adhedhasar ukurane. Karo useEffect, pangguna bakal ringkas-ringkas katon tooltip ing papan sing salah, banjur lumuncat:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Karo useEffect, kode sing padha menjalankan sawise paint → flicker siji frame.
useLayoutEffect ndadekno UI krasa gringsing, amarga browser ora bisa nglukis nganti selesai.Aturan jempol: standar useEffect; mung gunakna useLayoutEffect kanggo synchronous DOM measurements/mutations sing bakal flicker manawa ora.