React me forwardRef Kaise Use Karein (Advanced Refs in Hindi)

React me forwardRef ka use kaise karein aur components ke beech deep DOM access kaise paayein? Is advanced guide me step-by-step seekhein.

Kya aapne kabhi ek React components structure banaya hai jahan aapko child component ke andar maujood kisi HTML element ya DOM node ko parent se control karna pada? Aksar hum props ke zariye data pass karte hain, lekin jab baat focus karne, scrolling ya library integration ki aati hai, tab traditional props failure ho jaate hain. Yahan entry hoti hai forwardRef ki.

forwardRef क्या है और इसकी जरूरत क्यों पड़ती है?

Dosto, React ki philosophy "Declarative" hai, matlab hum bataate hain ki kya hona chahiye, na ki kaise. Lekin kabhi-kabhi hamein "Imperative" approach ki zaroorat padti hai. Manya lijiye aapne ek custom Input component banaya hai, aur aap chahte hain ki jaise hi page load ho, wo input focus ho jaaye. Normal props ke saath yeh possible nahi hai kyunki ref automatically child tak forward nahi hota.

Jab hum React.createRef() ya useRef() ka use karte hain, to wo sirf us component tak limited rehta hai jahan use define kiya gaya hai. forwardRef is gap ko bridge karta hai.

forwardRef का उपयोग कैसे करें (Step-by-Step Implementation)

Chaliye ek practical example dekhte hain jahan hum ek custom text input ko focus karenge.

1. Child Component Define Karein: Hamein component ko React.forwardRef function ke andar wrap karna hoga.
2. Ref Parameter Receive Karein: Functional component ko do arguments milenge: props aur ref.
3. DOM Element se Ref attach karein: HTML tag me ref={ref} attribute pass karein.

import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return (
    <input 
      ref={ref} 
      type="text" 
      placeholder="Kuch type karein..." 
      {...props} 
    />
  );
});

export default MyInput;

Ab parent component me iska use dekhte hain:

import React, { useRef } from 'react';
import MyInput from './MyInput';

const App = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <MyInput ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

forwardRef vs Normal Props में क्या अंतर है?

forwardRef का use कब करें?

Dosto, hamesha yaad rakhein ki "With great power comes great responsibility". forwardRef ka use sirf tabhi karein jab bahut zaroori ho. Iske common use cases hain:

• Focus Management: Modal ya Dialog open hone par automatic input focus karna.
• Third-party Library Integration: Agar aap D3.js ya koi chart library use kar rahe hain jise direct DOM node ki zaroorat hai.
• Animations: GSAP jaise libraries ke saath animations trigger karne ke liye.
• Scrolling: Programmatically kisi specific element tak scroll karne ke liye.

Agar aap bina wajah ref forwarding use karenge, to aapka code "tightly coupled" ho sakta hai, jisse debugging karna mushkil ho jata hai aur component reusability kam ho jaati hai.

Common Errors और Debugging Tips

Kai baar developers ko "Cannot read property 'focus' of null" jaisa error aata hai. Iska matlab hai ki ref.current abhi tak assign nahi hua hai ya component mount nahi hua hai.

Pro Tip: Hamesha check karein ki inputRef.current null to nahi hai. inputRef.current?.focus() ka optional chaining use karna best practice hai.

Ek aur important baat, forwardRef ke sath agar aap React DevTools use karenge, to aapko component ka naam ForwardRef(MyInput) dikhega. Isse readable banane ke liye aap displayName set kar sakte hain:

MyInput.displayName = 'MyInput';

Yeh simple si technique aapke production debugging ko bahut easy bana degi.

Toh dosto, humne aaj seekha ki forwardRef kaise kaam karta hai aur kab hamein iska use karna chahiye. Yaad rakhein, React me components jitne simple aur independent honge, aapka app utna hi scalable banega. Ref forwarding ka use karein, par tabhi jab aapke paas koi dusra rasta na bache.