दुवै effects चलाउछन्, तर ब्राउजर पेन्टको सापेक्षमा विभिन्न क्षणमा — र यो समय भिन्नता नै पूरो बिन्दु हो।
useEffect ब्राउजरले पेन्ट गरेपछि चलाउँछ। यो असिंक्रोनस र गैर-अवरोधकारी छ। लगभग सबै कुरामा (डेटा, सदस्यता, लगिङ) प्रयोग गर्नुहोस्।useLayoutEffect DOM परिवर्तन भएपछि तर ब्राउजरले पेन्ट गर्नु अघि सिंक्रोनसली चलाउँछ। जब तपाईंले लेआउट पढ्न र दृश्यमान फड़का बचाउन एउटै फ्रेममा DOM परिवर्तन गर्नु पर्छ भने प्रयोग गर्नुहोस्।विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्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 सँग, समान कोड पेन्ट पछि चलाउँछ → एक फ्रेम फड़का।
useLayoutEffect मा भारी काम UI लचकदार लाग्दछ, किनकि ब्राउजर यो पूरा नभएसम्म पेन्ट गर्न सक्दैन।अंगूठोको नियम: पूर्वनिर्धारितमा useEffect; सिर्फ सिंक्रोनस DOM मापन/उत्परिवर्तनको लागि useLayoutEffect प्रयोग गर्नुहोस् जुन अन्यथा फड़का हुन्छ।