రెండూ ప్రభావాలను నడుపుతాయి, కానీ బ్రౌజర్ పెయింట్కు సంబంధించి వేరు వేరు సమయాల్లో — మరియు ఆ సమయ వ్యత్యాసం సమస్త విషయం.
useEffect బ్రౌజర్ చిత్రీకరించిన తర్వాత నడుపుతుంది. ఇది అసింక్రోనస్ మరియు నాన్-బ్లాకింగ్. దాదాపు ప్రతిదానికి (డేటా, సబ్స్క్రిప్షన్లు, లాగింగ్) ఉపయోగించండి.useLayoutEffect DOM మార్పు చేయబడిన తర్వాత కానీ బ్రౌజర్ చిత్రీకరించే నడుపుతుంది. మీరు లేఅవుట్ చదవాలి మరియు ఒక ఫ్రేమ్లో DOM ను మార్చవలసి ఉన్నప్పుడు గమనించదగిన మిunesco నుండి తప్పించుకోవడానికి ఉపయోగించండి.render → DOM updated → [useLayoutEffect runs] → browser paints → [useEffect runs]
ఒక మూలకను కొలవడం మరియు దాని పరిమాణం ఆధారంగా సూచన నుండి పునర్నిర్ణయించడం ఊహించండి. useEffect తో, వినియోగదారు కొద్ది సమయానికి సూచన చేయి సరిగా లేని చోట చూస్తాడు, ఆపై ఇది దూకుతుంది:
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipTop(-height); // applied BEFORE paint → no visible jump
}, []);
useEffect తో, అదే కోడ్ పెయింట్ తర్వాత నడుపుతుంది → ఒక ఫ్రేమ్ మిMovie.
useLayoutEffect లో భారీ పని UI ను జాగ్రత్తగా ఉండేలా చేస్తుంది, ఎందుకంటే బ్రౌజర్ పూర్తి చేయువరకు చిత్రీకరించలేము.బ్రతుకుకు నియమం: useEffect కు డిఫాల్ట్; సమకాలీన DOM కొలతలు/మార్పుల కోసం మాత్రమే useLayoutEffect ఉపయోగించండి ఇతర విధంగా మిMovie.