useLayoutEffect से DOM तत्वों को मापना

element.getBoundingClientRect() एक DOMRect ऑब्जेक्ट लौटाता है, जिसमें व्यूपोर्ट के सापेक्ष तत्व का आकार और स्थिति होती है: top, right, bottom, left, width और height। सटीक मान लौटाने के लिए यह ब्राउज़र को लेआउट की गणना करने के लिए बाध्य करता है, इसलिए इसे कम ही चलाएँ।

यदि आप useEffect में getBoundingClientRect() पढ़ते हैं, तो ब्राउज़र पहले ही पेंट कर चुका होता है। यदि आप फिर माप के आधार पर स्थिति बदलते हैं, तो React दोबारा रेंडर करता है और ब्राउज़र फिर से पेंट करता है। सुधार दूसरे पेंट में दिखाई देने से पहले उपयोगकर्ताओं को तत्व कुछ समय के लिए गलत स्थिति या आकार में दिखाई दे सकता है।

useLayoutEffect में माप पढ़ना DOM में बदलावों के बाद, लेकिन पेंट से पहले होता है। माप के कारण होने वाला कोई भी स्थिति अपडेट React को समकालिक रूप से दोबारा रेंडर करने और सही किया हुआ DOM कमिट करने के लिए प्रेरित करता है—यह सब ब्राउज़र के कुछ भी पेंट करने से पहले होता है। उपयोगकर्ता को एक ही पेंट चक्र में केवल अंतिम, सही परिणाम दिखाई देता है।

टूलटिप को उसे सक्रिय करने वाले तत्व के पास दिखाई देना चाहिए। useLayoutEffect में getBoundingClientRect() का उपयोग करके सक्रिय करने वाले तत्व की स्थिति मापें, टूलटिप की निरपेक्ष स्थिति निकालें और उस स्थिति को स्थिति में सेट करें। टूलटिप पहले ही पेंट पर सही स्थान पर रेंडर होती है और गलत प्रारंभिक स्थिति से होने वाली कोई दिखाई देने वाली छलाँग नहीं आती।

किसी तत्व को उसके स्वाभाविक (बिना किसी सीमा वाले) आकार से निश्चित आकार तक ऐनिमेट करने के लिए, सीमा लागू करने से पहले उसका स्वाभाविक आकार जानना आवश्यक है। useLayoutEffect में ऐनिमेशन शैली लागू होने से पहले तत्व की ऊँचाई पढ़ें, उसे स्थिति में रखें और फिर उसे अपने CSS ट्रांज़िशन के शुरुआती कीफ़्रेम मान के रूप में उपयोग करें।

जब किसी पृष्ठ में स्टिकी हेडर होता है, तो उसके पीछे छिपने से बचाने के लिए मुख्य सामग्री में हेडर की ऊँचाई के बराबर ऊपर की पैडिंग होनी चाहिए। रेफ़ का उपयोग करके useLayoutEffect में हेडर की ऊँचाई मापें: headerRef.current.getBoundingClientRect().height। इसे सामग्री कंटेनर पर paddingTop के रूप में सेट करें। लेआउट पहले रेंडर से ही सही रहेगा।

जब आप useLayoutEffect के अंदर setState कॉल करते हैं, तो React उसी समकालिक कार्य-खंड में तुरंत एक और रेंडर और कमिट चक्र चलाता है। इस दोबारा रेंडर में उसका useLayoutEffect भी चलता है। सावधान रहें कि असीमित लूप न बने: स्थिति को तभी अपडेट करें जब नया माप वर्तमान स्थिति मान से अलग हो।

सर्वर पर DOM तत्व मौजूद नहीं होते, इसलिए getBoundingClientRect() त्रुटि उत्पन्न कर सकता है या शून्य मान लौटा सकता है। अपने useLayoutEffect में यह जाँच लगाएँ: if (typeof window === 'undefined') return;। SSR ऐप्स के लिए आपको स्थानापन्न आकार के साथ हाइड्रेट करना पड़ सकता है और क्लाइंट पर हाइड्रेशन के बाद माप लेना पड़ सकता है।

useLayoutEffect से किया गया एक बार का माप आपको माउंट के समय का आकार देता है। जब तत्व के आकार में बदलावों की निगरानी करनी हो—जैसे विंडो का आकार बदलने, गतिशील सामग्री या CSS बदलावों के कारण—तो इसके बजाय ResizeObserver का उपयोग करें। तत्व का आकार बदलने पर यह हर बार एक प्रतिक्रिया फ़ंक्शन चलाता है, इसलिए यह अनुकूलनशील कंपोनेंट्स के लिए अधिक उपयुक्त है।

यदि कई इफ़ेक्ट्स को एक ही माप की आवश्यकता हो, तो उसे एक बार निकालकर संदर्भ के माध्यम से साझा करें या प्रॉप्स के रूप में आगे भेजें। कई useLayoutEffect कॉल्स में एक ही getBoundingClientRect() मान निकालने से कई समकालिक लेआउट-पठन होते हैं, जिनमें से हर एक अपेक्षाकृत महँगा होता है। जहाँ संभव हो, मापों को एकत्रित करें।

इफ़ेक्ट्स चलने से पहले रेफ़्स DOM तत्वों से जोड़ दिए जाते हैं। जब useLayoutEffect चलता है, तब ref.current के DOM तत्व की ओर संकेत करने की गारंटी होती है। यही कारण है कि यह तरीका काम करता है: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, [])। माउंट किए गए कंपोनेंट के लेआउट इफ़ेक्ट के अंदर रेफ़ कभी अशून्य नहीं होता।

बदलावों के बाद लेकिन पेंट से पहले DOM का माप पढ़ने के लिए useLayoutEffect में getBoundingClientRect() का उपयोग करें। इन मापों से होने वाले स्थिति अपडेट उसी पेंट में शामिल समकालिक दोबारा रेंडर कराते हैं और झिलमिलाहट रोकते हैं। typeof window जाँच के साथ SSR से सुरक्षा करें। लगातार आकार की निगरानी के लिए ResizeObserver को प्राथमिकता दें।