Oba izvršita učinke, vendar v različnih trenutkih glede na brisanje brskalnika — in ta razlika v časovanju je v resnici vse.
useEffect se izvršiti po tem, ko je brskalnik narisan. Je asinkhron in neblokira. Uporabi ga za skoraj vse (podatke, naročnine, beleženje).useLayoutEffect se izvršiti sinhronsko po spremembi DOM, vendar PRED branjem brskalnika. Uporabi ga, ko moraš prebrati razporeditev in spremeniti DOM v istim kadru, da se izogneš vidnemu utripanju.Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Donirajrender → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
Si predstavljaj, da merita element in preprostitoniraš namig orodja na podlagi njegove velikosti. Z useEffect bi uporabnik na kratko videl namig na napačnem mestu, nato pa skoči:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
Z useEffect se ista koda izvršiti po branju → utripanje enega kadra.
useLayoutEffect naredi vmesnik spozen, ker brskalnik ne more brisati, dokler se ne konča.Pravilo palca: privzeto uporabi useEffect; useLayoutEffect samo za sinhrona merjenja/spremembe DOM, ki bi drugače utripali.