റിയാക്റ്റ് forwardRef: റെഫറൻസ് ഫോർവേഡിംഗിനുള്ള ഒരു സമഗ്രമായ ഗൈഡ്

റിയാക്റ്റിൽ, ഒരു ചൈൽഡ് കമ്പോണന്റിന്റെ DOM നോഡ് നേരിട്ട് ആക്‌സസ് ചെയ്യുന്നത് ഒരു വെല്ലുവിളിയാകാം. ഇവിടെയാണ് forwardRef വരുന്നത്, ഒരു റെഫ് ചൈൽഡ് കമ്പോണന്റിലേക്ക് ഫോർവേഡ് ചെയ്യുന്നതിനുള്ള ഒരു സംവിധാനം ഇത് നൽകുന്നു. ഈ ലേഖനം forwardRef-നെക്കുറിച്ച് ആഴത്തിൽ വിശദീകരിക്കുന്നു, അതിൻ്റെ ഉദ്ദേശ്യം, ഉപയോഗം, പ്രയോജനങ്ങൾ എന്നിവയെല്ലാം വിവരിക്കുന്നു, കൂടാതെ നിങ്ങളുടെ റിയാക്റ്റ് പ്രോജക്റ്റുകളിൽ ഇത് ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിനുള്ള അറിവ് നിങ്ങളെ സജ്ജരാക്കുകയും ചെയ്യുന്നു.

എന്താണ് forwardRef?

forwardRef എന്നത് ഒരു റിയാക്റ്റ് API ആണ്, ഇത് ഒരു പാരന്റ് കമ്പോണന്റിന് ചൈൽഡ് കമ്പോണന്റിലുള്ള ഒരു DOM നോഡിലേക്ക് ഒരു റെഫ് ലഭിക്കാൻ അനുവദിക്കുന്നു. forwardRef ഇല്ലാതെ, റെഫുകൾ സാധാരണയായി അവ സൃഷ്ടിച്ച കമ്പോണന്റിൽ ഒതുങ്ങുന്നു. ഈ പരിമിതി ഒരു പാരന്റിൽ നിന്ന് അതിൻ്റെ ചൈൽഡ് കമ്പോണന്റിന്റെ അടിസ്ഥാന DOM-മായി നേരിട്ട് സംവദിക്കുന്നത് ബുദ്ധിമുട്ടാക്കും.

ഇങ്ങനെ ചിന്തിക്കുക: നിങ്ങൾക്ക് ഒരു കസ്റ്റം ഇൻപുട്ട് കമ്പോണന്റ് ഉണ്ടെന്ന് കരുതുക, കമ്പോണന്റ് മൗണ്ട് ചെയ്യുമ്പോൾ ഇൻപുട്ട് ഫീൽഡിൽ ഓട്ടോമാറ്റിക്കായി ഫോക്കസ് ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. forwardRef ഇല്ലാതെ, പാരന്റ് കമ്പോണന്റിന് ഇൻപുട്ടിന്റെ DOM നോഡ് നേരിട്ട് ആക്‌സസ് ചെയ്യാൻ ഒരു മാർഗവുമില്ല. forwardRef ഉപയോഗിച്ച്, പാരന്റിന് ഇൻപുട്ട് ഫീൽഡിലേക്ക് ഒരു റെഫറൻസ് സൂക്ഷിക്കാനും അതിൽ focus() മെത്തേഡ് വിളിക്കാനും കഴിയും.

എന്തിന് forwardRef ഉപയോഗിക്കണം?

forwardRef വളരെ പ്രയോജനകരമാണെന്ന് തെളിയിക്കുന്ന ചില സാധാരണ സാഹചര്യങ്ങൾ താഴെ നൽകുന്നു:

• ചൈൽഡ് DOM നോഡുകൾ ആക്‌സസ് ചെയ്യുന്നു: ഇതാണ് പ്രാഥമിക ഉപയോഗം. പാരന്റ് കമ്പോണന്റുകൾക്ക് അവയുടെ ചൈൽഡ് കമ്പോണന്റുകൾക്കുള്ളിലെ DOM നോഡുകളെ നേരിട്ട് കൈകാര്യം ചെയ്യാനോ സംവദിക്കാനോ കഴിയും.
• പുനരുപയോഗിക്കാവുന്ന കമ്പോണന്റുകൾ നിർമ്മിക്കുന്നു: റെഫുകൾ ഫോർവേഡ് ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വിവിധ ഭാഗങ്ങളിൽ എളുപ്പത്തിൽ സംയോജിപ്പിക്കാൻ കഴിയുന്ന കൂടുതൽ ഫ്ലെക്സിബിളും പുനരുപയോഗിക്കാവുന്നതുമായ കമ്പോണന്റുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് കഴിയും.
• തേർഡ്-പാർട്ടി ലൈബ്രറികളുമായി സംയോജിപ്പിക്കുന്നു: ചില തേർഡ്-പാർട്ടി ലൈബ്രറികൾക്ക് DOM നോഡുകളിലേക്ക് നേരിട്ടുള്ള ആക്‌സസ് ആവശ്യമാണ്. forwardRef ഈ ലൈബ്രറികളെ നിങ്ങളുടെ റിയാക്റ്റ് കമ്പോണന്റുകളുമായി തടസ്സങ്ങളില്ലാതെ സംയോജിപ്പിക്കാൻ നിങ്ങളെ പ്രാപ്തരാക്കുന്നു.
• ഫോക്കസും സെലക്ഷനും നിയന്ത്രിക്കുന്നു: നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, സങ്കീർണ്ണമായ കമ്പോണന്റ് ഘടനകളിൽ ഫോക്കസും സെലക്ഷനും നിയന്ത്രിക്കുന്നത് forwardRef ഉപയോഗിച്ച് വളരെ ലളിതമാകും.

forwardRef എങ്ങനെ പ്രവർത്തിക്കുന്നു

forwardRef ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റ് (HOC) ആണ്. ഇത് ഒരു റെൻഡറിംഗ് ഫംഗ്‌ഷൻ അതിൻ്റെ ആർഗ്യുമെന്റായി എടുക്കുകയും ഒരു റിയാക്റ്റ് കമ്പോണന്റ് തിരികെ നൽകുകയും ചെയ്യുന്നു. റെൻഡറിംഗ് ഫംഗ്‌ഷന് props, ref എന്നിവ ആർഗ്യുമെന്റുകളായി ലഭിക്കുന്നു. പാരന്റ് കമ്പോണന്റ് കൈമാറുന്ന റെഫാണ് ref ആർഗ്യുമെന്റ്. റെൻഡറിംഗ് ഫംഗ്‌ഷനുള്ളിൽ, നിങ്ങൾക്ക് ഈ ref ചൈൽഡ് കമ്പോണന്റിലെ ഒരു DOM നോഡുമായി അറ്റാച്ചുചെയ്യാൻ കഴിയും.

അടിസ്ഥാന വാക്യഘടന

forwardRef-ന്റെ അടിസ്ഥാന വാക്യഘടന താഴെ പറയുന്നവയാണ്:

const MyComponent = React.forwardRef((props, ref) => {
  // Component logic here
  return 
...
;
});

നമുക്ക് ഈ വാക്യഘടനയെ വിഭജിക്കാം:

• React.forwardRef(): ഇതാണ് നിങ്ങളുടെ കമ്പോണന്റിനെ പൊതിയുന്ന ഫംഗ്‌ഷൻ.
• (props, ref) => { ... }: ഇതാണ് റെൻഡറിംഗ് ഫംഗ്‌ഷൻ. ഇതിന് കമ്പോണന്റിന്റെ പ്രോപ്പർട്ടികളും (props) പാരന്റിൽ നിന്ന് കൈമാറിയ റെഫും (ref) ലഭിക്കുന്നു.
• <div ref={ref}>...</div>: ഇവിടെയാണ് മാന്ത്രികത സംഭവിക്കുന്നത്. നിങ്ങൾക്ക് ലഭിച്ച ref നിങ്ങളുടെ കമ്പോണന്റിനുള്ളിലെ ഒരു DOM നോഡുമായി നിങ്ങൾ അറ്റാച്ചുചെയ്യുന്നു. ഈ DOM നോഡ് പിന്നീട് പാരന്റ് കമ്പോണന്റിന് ആക്‌സസ് ചെയ്യാൻ കഴിയും.

പ്രായോഗിക ഉദാഹരണങ്ങൾ

യഥാർത്ഥ സാഹചര്യങ്ങളിൽ forwardRef എങ്ങനെ ഉപയോഗിക്കാമെന്ന് വ്യക്തമാക്കുന്നതിന് ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നമുക്ക് പരിശോധിക്കാം.

ഉദാഹരണം 1: ഒരു ഇൻപുട്ട് ഫീൽഡിൽ ഫോക്കസ് ചെയ്യുന്നു

ഈ ഉദാഹരണത്തിൽ, മൗണ്ട് ചെയ്യുമ്പോൾ ഇൻപുട്ട് ഫീൽഡിൽ ഓട്ടോമാറ്റിക്കായി ഫോക്കസ് ചെയ്യുന്ന ഒരു കസ്റ്റം ഇൻപുട്ട് കമ്പോണന്റ് നമ്മൾ ഉണ്ടാക്കും.

import React, { useRef, useEffect } from 'react';

const FancyInput = React.forwardRef((props, ref) => {
  return (
    <input ref={ref} type="text" className="fancy-input" {...props} />
  );
});

function ParentComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <FancyInput ref={inputRef} placeholder="Focus me!" />
  );
}

export default ParentComponent;

വിശദീകരണം:

1. FancyInput, React.forwardRef ഉപയോഗിച്ച് നിർമ്മിച്ചിരിക്കുന്നു. ഇതിന് props, ref എന്നിവ ലഭിക്കുന്നു.
2. ref, <input> എലമെന്റുമായി അറ്റാച്ചുചെയ്തിരിക്കുന്നു.
3. ParentComponent, useRef ഉപയോഗിച്ച് ഒരു ref ഉണ്ടാക്കുന്നു.
4. ref, FancyInput-ലേക്ക് കൈമാറുന്നു.
5. useEffect ഹുക്കിൽ, കമ്പോണന്റ് മൗണ്ട് ചെയ്യുമ്പോൾ ഇൻപുട്ട് ഫീൽഡിൽ ഫോക്കസ് ചെയ്യുന്നു.

ഉദാഹരണം 2: ഫോക്കസ് മാനേജ്‌മെന്റോടുകൂടിയ കസ്റ്റം ബട്ടൺ

പാരന്റിന് ഫോക്കസ് നിയന്ത്രിക്കാൻ അനുവദിക്കുന്ന ഒരു കസ്റ്റം ബട്ടൺ കമ്പോണന്റ് നമുക്ക് നിർമ്മിക്കാം.

import React, { forwardRef } from 'react';

const MyButton = forwardRef((props, ref) => {
  return (
    <button ref={ref} className="my-button" {...props}>
      {props.children}
    </button>
  );
});

function App() {
  const buttonRef = React.useRef(null);

  const focusButton = () => {
    if (buttonRef.current) {
      buttonRef.current.focus();
    }
  };

  return (
    <div>
      <MyButton ref={buttonRef} onClick={() => alert('Button Clicked!')}>
        Click Me
      </MyButton>
      <button onClick={focusButton}>Focus Button</button>
    </div>
  );
}

export default App;

വിശദീകരണം:

1. MyButton, റെഫ് ബട്ടൺ എലമെന്റിലേക്ക് ഫോർവേഡ് ചെയ്യാൻ forwardRef ഉപയോഗിക്കുന്നു.
2. പാരന്റ് കമ്പോണന്റ് (App), ഒരു റെഫ് ഉണ്ടാക്കാൻ useRef ഉപയോഗിക്കുകയും അത് MyButton-ലേക്ക് കൈമാറുകയും ചെയ്യുന്നു.
3. focusButton ഫംഗ്‌ഷൻ, പാരന്റിന് പ്രോഗ്രമാറ്റിക്കായി ബട്ടണിൽ ഫോക്കസ് ചെയ്യാൻ അനുവദിക്കുന്നു.

ഉദാഹരണം 3: ഒരു തേർഡ്-പാർട്ടി ലൈബ്രറിയുമായി സംയോജിപ്പിക്കുന്നു (ഉദാഹരണം: react-select)

പല തേർഡ്-പാർട്ടി ലൈബ്രറികൾക്കും അടിസ്ഥാന DOM നോഡിലേക്ക് ആക്‌സസ് ആവശ്യമാണ്. react-select ഉപയോഗിക്കുന്ന ഒരു സാങ്കൽപ്പിക സാഹചര്യത്തിൽ forwardRef എങ്ങനെ സംയോജിപ്പിക്കാമെന്ന് നമുക്ക് നോക്കാം, അവിടെ നിങ്ങൾക്ക് സെലക്ടിന്റെ ഇൻപുട്ട് എലമെന്റ് ആക്‌സസ് ചെയ്യേണ്ടി വന്നേക്കാം.

ശ്രദ്ധിക്കുക: ഇത് ലളിതമായ ഒരു സാങ്കൽപ്പിക ചിത്രീകരണമാണ്. react-select-ന്റെ കമ്പോണന്റുകൾ ആക്‌സസ് ചെയ്യുന്നതിനും ഇഷ്ടാനുസൃതമാക്കുന്നതിനുമുള്ള ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്ന വഴികൾക്കായി യഥാർത്ഥ ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക.

import React, { useRef, useEffect } from 'react';
// Assuming a simplified react-select interface for demonstration
import Select from 'react-select'; // Replace with actual import

const CustomSelect = React.forwardRef((props, ref) => {
  return (
    <Select ref={ref} {...props} />
  );
});

function MyComponent() {
  const selectRef = useRef(null);

  useEffect(() => {
    // Hypothetical: Accessing the input element within react-select
    if (selectRef.current && selectRef.current.inputRef) {  // inputRef is a hypothetical prop
      console.log('Input Element:', selectRef.current.inputRef.current);
    }
  }, []);

  return (
    <CustomSelect
      ref={selectRef}
      options={[
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
      ]}
    />
  );
}

export default MyComponent;

തേർഡ്-പാർട്ടി ലൈബ്രറികൾക്കുള്ള പ്രധാന പരിഗണനകൾ:

• ലൈബ്രറിയുടെ ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക: തേർഡ്-പാർട്ടി ലൈബ്രറിയുടെ ആന്തരിക കമ്പോണന്റുകൾ ആക്‌സസ് ചെയ്യുന്നതിനും കൈകാര്യം ചെയ്യുന്നതിനുമുള്ള ശുപാർശിത മാർഗ്ഗങ്ങൾ മനസ്സിലാക്കാൻ എപ്പോഴും അതിൻ്റെ ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുക. ഡോക്യുമെന്റ് ചെയ്യാത്തതോ പിന്തുണയ്ക്കാത്തതോ ആയ രീതികൾ ഉപയോഗിക്കുന്നത് ഭാവിയിലെ പതിപ്പുകളിൽ അപ്രതീക്ഷിത സ്വഭാവത്തിനോ തകരാറുകൾക്കോ കാരണമായേക്കാം.
• ലഭ്യത (Accessibility): DOM നോഡുകൾ നേരിട്ട് ആക്‌സസ് ചെയ്യുമ്പോൾ, നിങ്ങൾ ലഭ്യതയുടെ മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. അസിസ്റ്റീവ് സാങ്കേതികവിദ്യകളെ ആശ്രയിക്കുന്ന ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ കമ്പോണന്റുകളുമായി സംവദിക്കാൻ ബദൽ മാർഗങ്ങൾ നൽകുക.

മികച്ച രീതികളും പരിഗണനകളും

forwardRef ഒരു ശക്തമായ ഉപകരണമാണെങ്കിലും, അത് വിവേകത്തോടെ ഉപയോഗിക്കേണ്ടത് അത്യാവശ്യമാണ്. മനസ്സിൽ സൂക്ഷിക്കേണ്ട ചില മികച്ച രീതികളും പരിഗണനകളും താഴെ നൽകുന്നു:

• അമിത ഉപയോഗം ഒഴിവാക്കുക: ലളിതമായ ബദലുകൾ ഉണ്ടെങ്കിൽ forwardRef ഉപയോഗിക്കരുത്. കമ്പോണന്റുകൾക്കിടയിൽ ആശയവിനിമയം നടത്താൻ പ്രോപ്‌സ് (props) അല്ലെങ്കിൽ കോൾബാക്ക് ഫംഗ്‌ഷനുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. forwardRef അമിതമായി ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ കോഡ് മനസ്സിലാക്കാനും പരിപാലിക്കാനും ബുദ്ധിമുട്ടാക്കും.
• എൻക്യാപ്‌സുലേഷൻ നിലനിർത്തുക: എൻക്യാപ്‌സുലേഷൻ തകർക്കുന്നതിനെക്കുറിച്ച് ശ്രദ്ധിക്കുക. ചൈൽഡ് കമ്പോണന്റുകളുടെ DOM നോഡുകൾ നേരിട്ട് കൈകാര്യം ചെയ്യുന്നത് നിങ്ങളുടെ കോഡിനെ കൂടുതൽ ദുർബലവും റീഫാക്ടർ ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ളതുമാക്കും. നേരിട്ടുള്ള DOM കൃത്രിമത്വം കുറയ്ക്കാനും സാധ്യമാകുമ്പോഴെല്ലാം കമ്പോണന്റിന്റെ ആന്തരിക API-യെ ആശ്രയിക്കാനും ശ്രമിക്കുക.
• ലഭ്യത (Accessibility): റെഫുകളും DOM നോഡുകളും ഉപയോഗിച്ച് പ്രവർത്തിക്കുമ്പോൾ, എപ്പോഴും ലഭ്യതയ്ക്ക് മുൻഗണന നൽകുക. നിങ്ങളുടെ കമ്പോണന്റുകൾ വൈകല്യമുള്ള ആളുകൾക്ക് ഉപയോഗയോഗ്യമാണെന്ന് ഉറപ്പാക്കുക. സെമാന്റിക് HTML ഉപയോഗിക്കുക, ഉചിതമായ ARIA ആട്രിബ്യൂട്ടുകൾ നൽകുക, അസിസ്റ്റീവ് സാങ്കേതികവിദ്യകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കമ്പോണന്റുകൾ പരീക്ഷിക്കുക.
• കമ്പോണന്റ് ലൈഫ് സൈക്കിൾ മനസ്സിലാക്കുക: റെഫ് എപ്പോൾ ലഭ്യമാകുമെന്നതിനെക്കുറിച്ച് അറിഞ്ഞിരിക്കുക. സാധാരണയായി കമ്പോണന്റ് മൗണ്ട് ചെയ്തതിനു ശേഷം റെഫ് ലഭ്യമാകും. കമ്പോണന്റ് റെൻഡർ ചെയ്തതിനു ശേഷം റെഫ് ആക്‌സസ് ചെയ്യാൻ useEffect ഉപയോഗിക്കുക.
• ടൈപ്പ്സ്ക്രിപ്റ്റിനൊപ്പം ഉപയോഗിക്കുക: നിങ്ങൾ ടൈപ്പ്സ്ക്രിപ്റ്റ് ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ റെഫുകളും forwardRef ഉപയോഗിക്കുന്ന കമ്പോണന്റുകളും ശരിയായി ടൈപ്പ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. ഇത് പിശകുകൾ നേരത്തെ കണ്ടെത്താനും നിങ്ങളുടെ കോഡിന്റെ മൊത്തത്തിലുള്ള ടൈപ്പ് സുരക്ഷ മെച്ചപ്പെടുത്താനും സഹായിക്കും.

forwardRef-ന് പകരമുള്ളവ

ചില സാഹചര്യങ്ങളിൽ, forwardRef ഉപയോഗിക്കുന്നതിന് കൂടുതൽ അനുയോജ്യമായേക്കാവുന്ന ബദലുകളുണ്ട്:

• പ്രോപ്‌സും കോൾബാക്കുകളും: പ്രോപ്‌സിലൂടെ ഡാറ്റയും സ്വഭാവവും കൈമാറുന്നത് പലപ്പോഴും കമ്പോണന്റുകൾക്കിടയിൽ ആശയവിനിമയം നടത്താനുള്ള ഏറ്റവും ലളിതവും അഭികാമ്യവുമായ മാർഗമാണ്. നിങ്ങൾക്ക് ഡാറ്റ കൈമാറുകയോ ചൈൽഡിൽ ഒരു ഫംഗ്‌ഷൻ ട്രിഗർ ചെയ്യുകയോ ചെയ്യണമെങ്കിൽ, പ്രോപ്‌സും കോൾബാക്കുകളും സാധാരണയായി മികച്ച തിരഞ്ഞെടുപ്പാണ്.
• Context: ആഴത്തിൽ നെസ്റ്റ് ചെയ്ത കമ്പോണന്റുകൾക്കിടയിൽ ഡാറ്റ പങ്കിടുന്നതിന്, റിയാക്റ്റിന്റെ Context API ഒരു നല്ല ബദലാണ്. Context നിങ്ങൾക്ക് ഓരോ ലെവലിലും പ്രോപ്‌സ് സ്വമേധയാ കൈമാറാതെ തന്നെ കമ്പോണന്റുകളുടെ ഒരു മുഴുവൻ സബ്ട്രീക്കും ഡാറ്റ നൽകാൻ അനുവദിക്കുന്നു.
• Imperative Handle: useImperativeHandle ഹുക്ക് forwardRef-നോടൊപ്പം ഉപയോഗിച്ച് പാരന്റ് കമ്പോണന്റിന് മുഴുവൻ DOM നോഡും നൽകാതെ, പരിമിതവും നിയന്ത്രിതവുമായ ഒരു API നൽകാൻ സാധിക്കും. ഇത് മികച്ച എൻക്യാപ്‌സുലേഷൻ നിലനിർത്തുന്നു.

വിപുലമായ ഉപയോഗം: useImperativeHandle

useImperativeHandle ഹുക്ക്, forwardRef ഉപയോഗിക്കുമ്പോൾ പാരന്റ് കമ്പോണന്റുകൾക്ക് നൽകുന്ന ഇൻസ്റ്റൻസ് മൂല്യം ഇഷ്ടാനുസൃതമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് പാരന്റ് കമ്പോണന്റിന് എന്ത് ആക്‌സസ് ചെയ്യാനാകുമെന്നതിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു, മികച്ച എൻക്യാപ്‌സുലേഷൻ പ്രോത്സാഹിപ്പിക്കുന്നു.

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    },
  }));

  return <input ref={inputRef} type="text" {...props} />;
});

function ParentComponent() {
  const inputRef = useRef(null);

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

  const handleGetValue = () => {
    alert(inputRef.current.getValue());
  };

  return (
    <div>
      <FancyInput ref={inputRef} placeholder="Enter text" />
      <button onClick={handleFocus}>Focus Input</button>
      <button onClick={handleGetValue}>Get Value</button>
    </div>
  );
}

export default ParentComponent;

വിശദീകരണം:

1. FancyInput കമ്പോണന്റ്, ഇൻപുട്ട് എലമെന്റിനായി ഒരു ആന്തരിക റെഫ് (inputRef) ഉണ്ടാക്കാൻ useRef ഉപയോഗിക്കുന്നു.
2. useImperativeHandle ഉപയോഗിച്ച്, ഫോർവേഡ് ചെയ്ത റെഫിലൂടെ പാരന്റ് കമ്പോണന്റിന് നൽകുന്ന ഒരു കസ്റ്റം ഒബ്ജക്റ്റ് നിർവചിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, നമ്മൾ ഒരു focus ഫംഗ്‌ഷനും ഒരു getValue ഫംഗ്‌ഷനും നൽകുന്നു.
3. പാരന്റ് കമ്പോണന്റിന് ഇൻപുട്ട് എലമെന്റിന്റെ DOM നോഡ് നേരിട്ട് ആക്‌സസ് ചെയ്യാതെ തന്നെ റെഫിലൂടെ ഈ ഫംഗ്‌ഷനുകൾ വിളിക്കാൻ കഴിയും.

സാധാരണ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു

forwardRef ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾ നേരിട്ടേക്കാവുന്ന ചില സാധാരണ പ്രശ്നങ്ങളും അവ എങ്ങനെ പരിഹരിക്കാമെന്നും താഴെ നൽകുന്നു:

• റെഫ് null ആണ്: റെഫ് പാരന്റ് കമ്പോണന്റിൽ നിന്ന് ശരിയായി കൈമാറിയെന്നും ചൈൽഡ് കമ്പോണന്റ് റെഫ് ഒരു DOM നോഡുമായി ശരിയായി അറ്റാച്ചുചെയ്യുന്നുണ്ടെന്നും ഉറപ്പാക്കുക. കൂടാതെ, കമ്പോണന്റ് മൗണ്ട് ചെയ്തതിനു ശേഷം (ഉദാഹരണത്തിന്, ഒരു useEffect ഹുക്കിൽ) നിങ്ങൾ റെഫ് ആക്‌സസ് ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• Cannot read property 'focus' of null: ഇത് സാധാരണയായി സൂചിപ്പിക്കുന്നത് റെഫ് DOM നോഡുമായി ശരിയായി അറ്റാച്ചുചെയ്തിട്ടില്ല, അല്ലെങ്കിൽ DOM നോഡ് ഇതുവരെ റെൻഡർ ചെയ്തിട്ടില്ല എന്നാണ്. നിങ്ങളുടെ കമ്പോണന്റ് ഘടന രണ്ടുതവണ പരിശോധിക്കുകയും റെഫ് ശരിയായ എലമെന്റുമായി അറ്റാച്ചുചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുക.
• ടൈപ്പ്സ്ക്രിപ്റ്റിലെ ടൈപ്പ് പിശകുകൾ: നിങ്ങളുടെ റെഫുകൾ ശരിയായി ടൈപ്പ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ റെഫിന്റെ ടൈപ്പ് നിർവചിക്കാൻ React.RefObject<HTMLInputElement> (അല്ലെങ്കിൽ ഉചിതമായ HTML എലമെന്റ് ടൈപ്പ്) ഉപയോഗിക്കുക. കൂടാതെ, forwardRef ഉപയോഗിക്കുന്ന കമ്പോണന്റ് React.forwardRef<HTMLInputElement, Props> ഉപയോഗിച്ച് ശരിയായി ടൈപ്പ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
• അപ്രതീക്ഷിത സ്വഭാവം: നിങ്ങൾക്ക് അപ്രതീക്ഷിത സ്വഭാവം അനുഭവപ്പെടുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ കോഡ് ശ്രദ്ധാപൂർവ്വം അവലോകനം ചെയ്യുകയും റിയാക്റ്റിന്റെ റെൻഡറിംഗ് പ്രക്രിയയിൽ ഇടപെടാൻ സാധ്യതയുള്ള രീതികളിൽ നിങ്ങൾ ആകസ്മികമായി DOM കൈകാര്യം ചെയ്യുന്നില്ലെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുക. നിങ്ങളുടെ കമ്പോണന്റ് ട്രീ പരിശോധിക്കാനും സാധ്യതയുള്ള പ്രശ്നങ്ങൾ തിരിച്ചറിയാനും റിയാക്റ്റ് ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക.

ഉപസംഹാരം

forwardRef റിയാക്റ്റ് ഡെവലപ്പറുടെ ആവനാഴിയിലെ ഒരു വിലപ്പെട്ട ഉപകരണമാണ്. ഇത് പാരന്റ്, ചൈൽഡ് കമ്പോണന്റുകൾക്കിടയിലുള്ള വിടവ് നികത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു, നേരിട്ടുള്ള DOM കൃത്രിമത്വം സാധ്യമാക്കുകയും കമ്പോണന്റ് പുനരുപയോഗക്ഷമത വർദ്ധിപ്പിക്കുകയും ചെയ്യുന്നു. ഇതിൻ്റെ ഉദ്ദേശ്യം, ഉപയോഗം, മികച്ച രീതികൾ എന്നിവ മനസ്സിലാക്കുന്നതിലൂടെ, കൂടുതൽ ശക്തവും വഴക്കമുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് forwardRef ഉപയോഗിക്കാം. ഇത് വിവേകത്തോടെ ഉപയോഗിക്കാനും, ലഭ്യതയ്ക്ക് മുൻഗണന നൽകാനും, സാധ്യമാകുമ്പോഴെല്ലാം എൻക്യാപ്‌സുലേഷൻ നിലനിർത്താൻ ശ്രമിക്കാനും ഓർമ്മിക്കുക.

ഈ സമഗ്രമായ ഗൈഡ് നിങ്ങളുടെ റിയാക്റ്റ് പ്രോജക്റ്റുകളിൽ forwardRef ആത്മവിശ്വാസത്തോടെ നടപ്പിലാക്കുന്നതിനുള്ള അറിവും ഉദാഹരണങ്ങളും നൽകിയിരിക്കുന്നു. സന്തോഷകരമായ കോഡിംഗ്!