ਦੋਵੇਂ ਪ੍ਰਭਾਵ ਚਲਾਉਂਦੇ ਹਨ, ਪਰ ਬ੍ਰਾਊਜ਼ਰ ਪੇਂਟ ਦੇ ਮੁਕਾਬਲੇ ਵੱਖ-ਵੱਖ ਸਮੇਂ — ਅਤੇ ਇਹ ਸਮੇ ਦਾ ਫਰਕ ਹੀ ਪੂਰੀ ਗੱਲ ਹੈ।
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 ਨੂੰ ਡਿਫਾਲਟ ਕਰੋ; ਸਿਰਫ useLayoutEffect ਨੂੰ ਸਮੇ DOM ਪਰਿਮਾਪਣ/ਮੁਟੇਸ਼ਨ ਲਈ ਵਰਤੋ ਜੋ ਨਹੀਂ ਤਾਂ ਫਲਿਕਰ ਕਰਦੇ।