forwardRef ਅਤੇ useImperativeHandle ਕਿਸ ਲਈ ਹਨ?

Question

Accepted Answer

ਇੱਕ `ref` ਜੋ ਕਸਟਮ ਕੰਪੋਨੈਂਟ ਨੂੰ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ **ਆਟੋਮੈਟਿਕ** ਤੌਰ ਤੇ ਇਸਦੇ ਅੰਦਰ ਕਿਸੇ DOM ਨੋਡ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦਾ। **`forwardRef`** ਇੱਕ ਕੰਪੋਨੈਂਟ ਨੂੰ ref ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਇਸਨੂੰ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਨਾਲ ਜੋੜਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। **`useImperativeHandle`** *ਕਿਸ* ਚੀਜ ਨੂੰ ਉਹ ref ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਉਸਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਦਾ ਹੈ। ## DOM ਨੋਡ ਵਿੱਚ ref ਨੂੰ ਅੱਗੇ ਭੇਜਣਾ ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## ਕਚਮਚੇ ਨੋਡ ਦੀ ਬਜਾਏ ਕਸਟਮ API ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਕਈ ਵਾਰ ਤੁਸੀਂ ਪੂਰੇ DOM ਨੋਡ ਨੂੰ ਛੱਡ ਨਹੀਂ ਸਕਦੇ — ਸਿਰਫ ਖਾਸ ਮੈਥਡਾਂ: ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## ਇਸਨੂੰ ਕਦੋਂ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ (ਬਾਲਆਬਲੀ) ਸੰਚਾਰ ਲਈ props/state ਨੂੰ ਤਰਜੀਹ ਦਿਓ। ਸਿਰਫ ਬਿਲਕੁਲ **ਵਜੋਂ ਜਰੂਰੀ** ਲੋੜਾਂ ਲਈ refs ਤੱਕ ਪਹੁੰਚੋ: ਫੋਕਸ ਪ੍ਰਬੰਧ, ਸਕਰੋਲਿੰਗ, ਟੈਕਸਟ ਚੋਣ, ਮੀਡੀਆ ਪਲੇਬੈਕ, ਜਾਂ ਵਜੋਂ ਜਰੂਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨਾਲ ਏਕੀਕਰਨ। ਧਿਆਨ ਰੱਖੋ: **React 19** ਵਿੱਚ, `ref` ਨੂੰ ਸਧਾਰਨ prop ਦੇ ਤੌਰ ਤੇ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ `forwardRef` ਅਕਸਰ ਹੋਰ ਜਰੂਰੀ ਨਹੀਂ ਹੈ।