✨ Quick Answer: React में useLayoutEffect क्या है और यह useEffect से कैसे अलग है? आसान हिंदी में जानें इन दोनों Hooks का मुख्य अंतर, वर्किंग और Use Cases.
React useLayoutEffect kya hai aur yeh useEffect se kaise alag hai? Is Hindi guide me layouts, visual flickering, rendering aur hooks ko step-by-step seekhein.दोस्तों, क्या आपके साथ कभी ऐसा हुआ है कि आपने ReactJS में कोई dynamic UI component बनाया—जैसे कि कोई Custom Tooltip, dropdown, या modal—और जब वो स्क्रीन पर लोड होता है, तो एक मामूली से सेकंड के लिए वह अपनी सही जगह से खिसक कर कहीं और दिखता है, और फिर तुरंत सही जगह पर आ जाता है? इसे हम React की दुनिया में Visual Flickering या Layout Shift कहते हैं।
जब आप इस error या UI bug को सुलझाने के लिए Google करते हैं, तो अक्सर आपको एक सलाह मिलती है: "useEffect की जगह React useLayoutEffect का इस्तेमाल करो!" लेकिन रुकिए, ऐसा क्यों? क्या ये दोनों hooks दिखने में और काम करने में एक जैसे नहीं हैं? आखिर इन दोनों के पीछे का JavaScript runtime और browser pipeline का क्या खेल है?
आज आपका यह सीनियर डेवलपर दोस्त आपको बहुत ही आसान, मज़ेदार और गहरी technical हिंदी में समझाएगा कि React useLayoutEffect क्या है, यह useEffect से कैसे अलग है, और कब आपको कौन सा hook इस्तेमाल करना चाहिए। तो चलिए, अपनी कॉफ़ी की चुस्की लीजिए और मेरे साथ इस deep-dive pair-programming session में शामिल हो जाइए!
React rendering और browser painting क्या होती है? (The core concept)
दोस्तों, useLayoutEffect को गहराई से समझने के लिए हमें सबसे पहले यह समझना होगा कि जब भी React में कोई State बदलती है, तो React Component के रेंडर होने से लेकर हमारी स्क्रीन पर पिक्सल (pixels) दिखने तक का सफ़र कैसा होता है। अगर आप इस Lifecycle को समझ गए, तो समझो आपको पूरा खेल समझ आ गया!
जब भी कोई component रेंडर होता है, तो मुख्य रूप से 3 बड़े steps होते हैं:
- Render: React आपके components को कॉल करता है, Virtual DOM तैयार करता है, और यह तय करता है कि UI में क्या बदलाव करने हैं।
- Commit: React इन बदलावों को असली DOM (Real DOM) में डाल देता है (DOM mutation)। इस स्टेज पर, elements DOM में तो आ जाते हैं, लेकिन ब्राउज़र ने उन्हें अभी स्क्रीन पर ड्रा (paint) नहीं किया होता है।
- Paint: ब्राउज़र नए DOM structures का layout calculate करता है और स्क्रीन पर पिक्सल को paint करता है। अब यूजर को स्क्रीन पर बदलाव दिखने लगते हैं।
अब यहीं पर सारा अंतर आता है कि हमारे ये दोनों Hooks कब execution queue में आते हैं!
React useLayoutEffect क्या है? (What is useLayoutEffect?)
React useLayoutEffect एक ऐसा hook है जिसका signature बिल्कुल useEffect जैसा ही होता है, लेकिन इसका व्यवहार synchronous (सिंक्रोनस) होता है।
जब React DOM को बदल देता है (यानी commit phase के बाद), तो ब्राउज़र को स्क्रीन री-पेंट करने का मौका मिलने से ठीक पहले useLayoutEffect चलता है। इसका मतलब है कि इसके अंदर लिखा गया कोई भी कोड तब तक ब्राउज़र को स्क्रीन पर नया visual दिखाने से रोके रखेगा (blocking execution), जब तक कि यह पूरी तरह से execute नहीं हो जाता।
यदि आप इस hook के अंदर state बदलते हैं, तो React तुरंत re-render ट्रिगर करेगा और नया UI बना देगा, और यूजर को स्क्रीन पर पुराना state कभी भी नहीं दिखेगा। यानी कि बीच का कोई visual flicker यूजर की आँखों के सामने नहीं आएगा।
useLayoutEffect का Syntax
इसका सिंटैक्स बिल्कुल वही है जो आप हर रोज़ useEffect के साथ इस्तेमाल करते हैं:
import { useLayoutEffect, useState, useRef } from 'react';
function MyComponent() {
const [width, setWidth] = useState(0);
const elementRef = useRef(null);
useLayoutEffect(() => {
if (elementRef.current) {
// DOM से सीधा width measure करना
setWidth(elementRef.current.getBoundingClientRect().width);
}
}, []); // Dependency array
return (
<div ref={elementRef}>
My width is {width}px
</div>
);
}React useLayoutEffect vs useEffect में अंतर (Comparison Table)
ध्यान देने वाली बात ये है कि 90% से ज़्यादा मामलों में आपको सिर्फ useEffect का ही इस्तेमाल करना चाहिए। लेकिन उस बचे हुए 10% के लिए, आपको इन दोनों के बीच का अंतर कंठस्थ होना चाहिए। चलिए एक clean comparison table देखते हैं:
| Feature | useEffect Hook | useLayoutEffect Hook |
|---|---|---|
| Execution Timing | Asynchronous (ब्राउज़र के paint करने के बाद) | Synchronous (DOM updates के बाद, paint से पहले) |
| Blocking behavior | Non-blocking (यह UI rendering को नहीं रोकता) | Blocking (जब तक यह खत्म नहीं होता, ब्राउज़र स्क्रीन paint नहीं करता) |
| Best Use Case | Data fetching, API calls, Event listeners setup | DOM layout measurements, positions calculate करना, flickering रोकना |
| Performance Impact | बहुत अच्छा (performance-friendly) | ज़्यादा इस्तेमाल से UI slow या laggy हो सकता है |
| Server-Side Rendering (SSR) | SSR और hydration के साथ आसानी से काम करता है | SSR पर warning देता है (Next.js/Gatsby में issues आते हैं) |
Visual Flickering की समस्या क्या है? (The Problem Explained)
मान लीजिए कि हम एक tooltip बना रहे हैं जो एक बटन के ऊपर दिखाई देनी चाहिए। जब यूजर बटन पर होवर (hover) करता है, तो हम tooltip को DOM में डालते हैं।
लेकिन tooltip का size क्या है, यह तो हमें तब पता चलेगा जब वो DOM में render होगी! अब अगर हम tooltip की position (left, top coordinates) को useEffect की मदद से calculate करके state में अपडेट करते हैं, तो क्या होगा?
- React tooltip को रेंडर करता है डिफ़ॉल्ट position (जैसे 0, 0) पर।
- ब्राउज़र इसे स्क्रीन पर 0, 0 पोजीशन पर paint कर देता है। (यूजर को एक झटके के लिए tooltip 0, 0 पर दिखती है)।
- पेंट के तुरंत बाद,
useEffectफायर होता है। वह tooltip का real width/height मापता है और उसकी सही पोजीशन (जैसे left: 150px, top: 80px) सेट करता है। - State चेंज होती है, React re-render करता है और अब ब्राउज़र सही पोजीशन पर paint करता है।
इसके परिणामस्वरूप यूजर को एक बहुत ही भद्दा flicker (झटका) महसूस होता है, जो आपकी application की UX क्वालिटी को खराब करता है।
---useLayoutEffect इसे कैसे हल करता है? (The Solution in Action)
अगर हम इसी काम के लिए useLayoutEffect का उपयोग करते हैं, तो कहानी पूरी बदल जाती है:
- React tooltip को DOM में डालता है।
- ब्राउज़र अभी स्क्रीन पेंट करने ही वाला था कि
useLayoutEffectबीच में आ जाता है और कहता है "रुको! पहले मुझे काम करने दो।" - हम synchronous तरीके से tooltip का size मापते हैं और उसी समय उसकी position state को अपडेट कर देते हैं।
- React तुरंत re-render करता है और नई position को DOM में अपडेट कर देता है।
- अब ब्राउज़र पहली बार में ही tooltip को बिल्कुल सही जगह (left: 150px, top: 80px) पर paint करता है।
यूजर को कोई झटका या flickering दिखाई नहीं देती! सब कुछ एकदम smooth मक्खन की तरह होता है।
---Production-Ready Code Example: Tooltip Positioning Component
चलिए, एक असली production-ready code लिखते हैं। इस उदाहरण में, हम एक dynamic Tooltip component बनाएंगे जो किसी बटन के ठीक नीचे उसकी dynamic height और width के आधार पर खुद को position करेगी।
ध्यान से देखिए कि हम कैसे React components का उपयोग करके इस interactive component को तैयार करते हैं।
import React, { useState, useRef, useLayoutEffect } from 'react';
// Main Tooltip Wrapper Component
export default function TooltipExample() {
const [showTooltip, setShowTooltip] = useState(false);
const buttonRef = useRef(null);
const tooltipRef = useRef(null);
const [coords, setCoords] = useState({ top: 0, left: 0 });
useLayoutEffect(() => {
// अगर tooltip विज़िबल नहीं है, तो कुछ करने की ज़रुरत नहीं है
if (!showTooltip || !buttonRef.current || !tooltipRef.current) {
return;
}
// बटन और टूलटिप दोनों की exact position और dimensions निकालना
const buttonRect = buttonRef.current.getBoundingClientRect();
const tooltipRect = tooltipRef.current.getBoundingClientRect();
// टूलटिप को बटन के ठीक नीचे और सेंटर में प्लेस करने का लॉजिक
const calculatedTop = buttonRect.bottom + window.scrollY + 10; // 10px का गैप
const calculatedLeft = buttonRect.left + window.scrollX + (buttonRect.width / 2) - (tooltipRect.width / 2);
// Coordinate state को सिंक्रोनसली सेट करना
setCoords({
top: calculatedTop,
left: calculatedLeft,
});
}, [showTooltip]); // जब भी showTooltip की state बदलेगी, यह रन होगा
return (
<div style={{ padding: '80px', textAlign: 'center', fontFamily: 'sans-serif' }}>
<h2>React useLayoutEffect Real-world Tooltip Example</h2>
<p>Hover on the button below to see dynamic smooth positioning!</p>
<button
ref={buttonRef}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
style={{
padding: '12px 24px',
fontSize: '16px',
fontWeight: 'bold',
cursor: 'pointer',
backgroundColor: '#06b6d4',
color: '#fff',
border: 'none',
borderRadius: '8px',
transition: 'background 0.3s',
}}
>
Hover Me!
</button>
{showTooltip && (
<div
ref={tooltipRef}
style={{
position: 'absolute',
top: `${coords.top}px`,
left: `${coords.left}px`,
backgroundColor: '#1e293b',
color: '#fff',
padding: '8px 12px',
borderRadius: '6px',
fontSize: '14px',
whiteSpace: 'nowrap',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
zIndex: 9999,
}}
>
🚀 Awesome Dynamic Tooltip!
</div>
)}
</div>
);
}इस code को अपने local project में रन करके देखिए। अगर आप useLayoutEffect की जगह useEffect लिखेंगे और अपनी screen refresh rate को धीमा करेंगे (या low-end mobile check करेंगे), तो आपको साफ-साफ दिखेगा कि useEffect के केस में tooltip पहले कहीं और बनती है और फिर खिसक कर बटन के नीचे आती है, जबकि useLayoutEffect में यह समस्या हमेशा के लिए हल हो जाती है!
Server-Side Rendering (SSR) और useLayoutEffect की समस्या (Next.js React Error)
यदि आप Next.js या किसी भी Server-Side Rendering (SSR) framework का उपयोग कर रहे हैं, तो आपको console में एक बहुत ही डरावनी warning देखने को मिल सकती है:
"Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the HTML... Use useEffect instead."
ऐसा क्यों होता है?
क्योंकि Server (NodeJS Runtime) के पास कोई browser window या real DOM tree नहीं होता है। Server सिर्फ HTML generate करता है। चूंकि useLayoutEffect को DOM layout मापने की आवश्यकता होती है और Server पर कोई DOM ही नहीं है, इसलिए React परेशान हो जाता है।
इस Error को Solve कैसे करें?
इस error को सुलझाने का सबसे आसान और professional तरीका है कि आप एक custom safety checking wrap तैयार करें, जिसे हम Isomorphic Layout Effect कहते हैं।
import { useEffect, useLayoutEffect } from 'react';
// यह चेक करता है कि हम browser environment में हैं या server environment में
const useIsomorphicLayoutEffect = typeof window !== 'undefined'
? useLayoutEffect
: useEffect;
export default useIsomorphicLayoutEffect;अब आप अपने components में सीधे useLayoutEffect इंपोर्ट करने के बजाय इस custom useIsomorphicLayoutEffect का इस्तेमाल करें। यह server पर बिना किसी warning के useEffect की तरह काम करेगा, और client-side पर synchronous useLayoutEffect की तरह!
Best Practices & Performance Guidelines
मेरे 50 सालों के प्रोग्रामिंग तजुर्बे का निचोड़ (philosophy) ये है कि: "जिस औजार की जहाँ ज़रूरत हो, वहीं इस्तेमाल करो। बिना वजह हर पेंच को हथौड़े से मत ठोंको!"
यहाँ कुछ बहुत महत्वपूर्ण नियम हैं जिन्हें आपको हमेशा याद रखना है:
- Default to useEffect: हमेशा अपनी शुरुआत
useEffectसे ही करें। API integration, analytics logs, set timeouts, and state management जैसी चीज़ें हमेशाuseEffectमें ही होनी चाहिए। - Do NOT block the paint: क्योंकि
useLayoutEffectsynchronous है, अगर आपने इसके अंदर कोई भारी loop चला दिया या कोई heavy CPU calculation कर दी, तो आपकी पूरी application freeze हो जाएगी और यूजर को स्क्रीन पर कुछ भी हलचल नहीं दिखेगी। - Keep hooks small: हमेशा hooks के dependencies array को सही से manage करें ताकि बेवजह re-computations न हों।
- Use refs carefully: Layout calculation के लिए हमेशा Element Refs (
useRef) का उपयोग करें, सीधे document elements को query selector से ढूँढना (जैसेdocument.getElementById) React के standards के खिलाफ है।
अगर आप React Hooks के बारे में और अधिक गहराई से जानना चाहते हैं, तो Official React Documentation पर जाकर इसके specs को ज़रूर पढ़ें।
---तो दोस्तों, हमने आज क्या-क्या सीखा? हमने समझा कि React useLayoutEffect एक बहुत ही ताकतवर synchronous hook है, जो विशेष रूप से UI elements की measurements लेने और visual layout shift/flickering को रोकने के लिए डिज़ाइन किया गया है। लेकिन performance को ध्यान में रखते हुए, इसे सोच-समझकर केवल ज़रूरी जगहों पर ही इस्तेमाल करना चाहिए।
अगर आपको यह deep-dive, pair-programming style ब्लॉग ट्यूटोरियल पसंद आया हो, तो इसे अपने डेवलपर दोस्तों के साथ शेयर करना बिल्कुल मत भूलना! कोडिंग करते रहिए, नया सीखते रहिए, और खुश रहिए!
---
टिप्पणियाँ
एक टिप्पणी भेजें