બંને અસર ચલાવે છે, પરંતુ બ્રાউজર પેઇન્ટ સંબંધિત વિવિધ ક્ષણોમાં — અને તે સમય તફાવત એ સમગ્ર મુદ્દો છે.
useEffect બ્રાઉઝર પેઇન્ટ કર્યા પછી ચલાવે છે. તે અસિંક્રોનસ અને બિન-બ્લોકિંગ છે. તેનો ઉપયોગ લગભગ બધું માટે કરો (ડેટા, સબસ્ક્રિપ્શન્સ, લોગિંગ).useLayoutEffect DOM મ્યુટેટ થયા પછી પરંતુ બ્રાઉઝર પેઇન્ટ કરતા પહેલા સિંક્રોનસલી ચલાવે છે. તેનો ઉપયોગ ત્યારે કરો જ્યારે તમે લેઆઉટ વાંચવું જોઈએ અને પ્રત્યક્ષ ઝબકમી ટાળવા માટે એક જ ફ્રેમમાં DOM બદલવું જોઈએ.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 માં ડિફોલ્ટ; ફક્ત useLayoutEffect ને સિંક્રોનસ DOM માપ/મ્યુટેશન માટે જ ઉપયોગ કરો જે અન્યથા ઝબકશે.