useRef

useRef என்பது rendering-க்கு தேவையில்லாத value ஒன்றை reference செய்ய உதவும் React Hook.

const ref = useRef(initialValue)

குறிப்பு
- useRef(initialValue)
பயன்பாடு
Troubleshooting
- Custom component-க்கு ref பெற முடியவில்லை

குறிப்பு

`useRef(initialValue)`

Ref ஒன்றை declare செய்ய, உங்கள் component-ன் top level-இல் useRef call செய்யவும்.

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...

மேலும் examples-ஐ கீழே பார்க்கவும்.

Parameters

initialValue: Ref object-ன் current property ஆரம்பத்தில் எப்படியிருக்க வேண்டும் என்று நீங்கள் விரும்பும் value. இது எந்த type value-யாகவும் இருக்கலாம். Initial render-க்கு பிறகு இந்த argument ignored செய்யப்படும்.

Returns

useRef ஒற்றை property கொண்ட object ஒன்றை return செய்கிறது:

current: ஆரம்பத்தில், நீங்கள் pass செய்த initialValue ஆக set செய்யப்படும். பின்னர் அதை வேறு ஒன்றாக set செய்யலாம். Ref object-ஐ JSX node-க்கு ref attribute ஆக React-க்கு pass செய்தால், React அதன் current property-ஐ set செய்யும்.

அடுத்த renders-இல், useRef அதே object-ஐ return செய்யும்.

கவனிக்க வேண்டியவை

ref.current property-ஐ mutate செய்யலாம். State-க்கு மாறாக, இது mutable. ஆனால் அது rendering-க்கு பயன்படுத்தப்படும் object ஒன்றை வைத்திருந்தால் (உதாரணமாக, உங்கள் state-ன் ஒரு பகுதி), அந்த object-ஐ mutate செய்யக்கூடாது.
ref.current property-ஐ மாற்றும்போது, React உங்கள் component-ஐ re-render செய்யாது. Ref என்பது plain JavaScript object என்பதால், அதை நீங்கள் எப்போது மாற்றுகிறீர்கள் என்பதை React அறியாது.
Initialization தவிர, rendering போது ref.current-ஐ write அல்லது read செய்ய வேண்டாம். இது உங்கள் component-ன் behavior-ஐ unpredictable ஆக்கும்.
Strict Mode-இல், accidental impurities கண்டுபிடிக்க உதவ React உங்கள் component function-ஐ இரண்டு முறை call செய்யும். இது development-only behavior; production-ஐ பாதிக்காது. ஒவ்வொரு ref object-உம் இரண்டு முறை உருவாக்கப்படும்; ஆனால் versions-இல் ஒன்று discard செய்யப்படும். உங்கள் component function pure ஆக இருந்தால் (அப்படியே இருக்க வேண்டும்), இது behavior-ஐ பாதிக்காது.

பயன்பாடு

Ref கொண்டு value ஒன்றை reference செய்தல்

ஒன்று அல்லது அதற்கு மேற்பட்ட refs-ஐ declare செய்ய, உங்கள் component-ன் top level-இல் useRef call செய்யவும்.

import { useRef } from 'react';

function Stopwatch() {
  const intervalRef = useRef(0);
  // ...

useRef, நீங்கள் வழங்கிய initial value-க்கு முதலில் set செய்யப்பட்ட ஒற்றை current property கொண்ட ref object-ஐ return செய்கிறது.

அடுத்த renders-இல், useRef அதே object-ஐ return செய்யும். தகவலை store செய்து பின்னர் read செய்ய அதன் current property-ஐ மாற்றலாம். இது உங்களுக்கு state-ஐ நினைவூட்டலாம்; ஆனால் ஒரு முக்கியமான வேறுபாடு உள்ளது.

Ref மாற்றுவது re-render trigger செய்யாது. இதன் பொருள், உங்கள் component-ன் visual output-ஐ பாதிக்காத தகவலை store செய்ய refs சிறந்தவை. உதாரணமாக, interval ID ஒன்றை store செய்து பின்னர் retrieve செய்ய வேண்டுமானால், அதை ref-இல் வைக்கலாம். Ref-க்குள் value update செய்ய, அதன் current property-ஐ manually மாற்ற வேண்டும்:

function handleStartClick() {
  const intervalId = setInterval(() => {
    // ...
  }, 1000);
  intervalRef.current = intervalId;
}

பின்னர், அந்த interval ID-ஐ ref-இலிருந்து read செய்து அந்த interval-ஐ clear செய்யலாம்:

function handleStopClick() {
  const intervalId = intervalRef.current;
  clearInterval(intervalId);
}

Ref பயன்படுத்துவதன் மூலம், நீங்கள் உறுதிசெய்வது:

Re-renders இடையே தகவலை store செய்யலாம் (ஒவ்வொரு render-க்கும் reset ஆகும் regular variables போல அல்ல).
அதை மாற்றுவது re-render trigger செய்யாது (re-render trigger செய்யும் state variables போல அல்ல).
தகவல் உங்கள் component-ன் ஒவ்வொரு copy-க்கும் local ஆக இருக்கும் (shared ஆக இருக்கும் வெளியுள்ள variables போல அல்ல).

Ref மாற்றுவது re-render trigger செய்யாது; ஆகவே screen-இல் display செய்ய வேண்டிய தகவலை store செய்ய refs பொருத்தமானவை அல்ல. அதற்கு பதிலாக state பயன்படுத்தவும். useRef மற்றும் useState இடையே தேர்வு செய்வது பற்றி மேலும் படிக்கவும்.

useRef கொண்டு value ஒன்றை reference செய்யும் examples

Example 1 of 2:
Click counter

இந்த component, button எத்தனை முறை clicked ஆனது என்பதை track செய்ய ref பயன்படுத்துகிறது. இங்கே state-க்கு பதிலாக ref பயன்படுத்துவது சரி; ஏனெனில் click count event handler-இல் மட்டுமே read மற்றும் write செய்யப்படுகிறது.

Fork

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('நீங்கள் ' + ref.current + ' முறை click செய்தீர்கள்!');
  }

  return (
    <button onClick={handleClick}>
      என்னை click செய்!
    </button>
  );
}

JSX-இல் {ref.current} காட்டினால், click செய்தபோது number update ஆகாது. ஏனெனில் ref.current set செய்வது re-render trigger செய்யாது. Rendering-க்கு பயன்படுத்தப்படும் தகவல் state ஆக இருக்க வேண்டும்.

Pitfall

Rendering போது ref.current-ஐ write அல்லது read செய்ய வேண்டாம்.

உங்கள் component-ன் body pure function போல நடக்கிறது என்று React எதிர்பார்க்கிறது:

Inputs (props, state, மற்றும் context) அதே இருந்தால், அது துல்லியமாக அதே JSX return செய்ய வேண்டும்.
வேறு order-இல் அல்லது வேறு arguments உடன் call செய்வது மற்ற calls-ன் results-ஐ பாதிக்கக்கூடாது.

Ref-ஐ rendering போது read அல்லது write செய்வது இந்த expectations-ஐ உடைக்கும்.

function MyComponent() {
  // ...
  // 🚩 Don't write a ref during rendering
  myRef.current = 123;
  // ...
  // 🚩 Don't read a ref during rendering
  return <h1>{myOtherRef.current}</h1>;
}

அதற்கு பதிலாக event handlers அல்லது effects-இலிருந்து refs read அல்லது write செய்யலாம்.

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ You can read or write refs in event handlers
    doSomething(myOtherRef.current);
  }
  // ...
}

Rendering போது ஏதாவது read அல்லது write செய்ய வேண்டியிருந்தால், அதற்கு பதிலாக state பயன்படுத்தவும்.

இந்த rules-ஐ உடைத்தால், உங்கள் component இன்னும் வேலை செய்யலாம்; ஆனால் React-இல் நாங்கள் சேர்க்கும் புதிய features பலவும் இந்த expectations-ஐ சார்ந்திருக்கும். உங்கள் components pure ஆக வைத்திருப்பது பற்றி மேலும் படிக்கவும்.

Ref கொண்டு DOM-ஐ manipulate செய்தல்

DOM-ஐ manipulate செய்ய ref பயன்படுத்துவது மிகவும் பொதுவானது. இதற்கு React built-in support கொண்டுள்ளது.

முதலில், null என்ற initial value உடன் ref object declare செய்யவும்:

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  // ...

பிறகு, manipulate செய்ய விரும்பும் DOM node-ன் JSX-க்கு உங்கள் ref object-ஐ ref attribute ஆக pass செய்யவும்:

  // ...
  return <input ref={inputRef} />;

React DOM node-ஐ உருவாக்கி screen-இல் வைத்த பிறகு, உங்கள் ref object-ன் current property-ஐ அந்த DOM node ஆக set செய்யும். இப்போது <input>-ன் DOM node-ஐ access செய்து focus() போன்ற methods call செய்யலாம்:

  function handleClick() {
    inputRef.current.focus();
  }

Node screen-இலிருந்து அகற்றப்படும்போது, React current property-ஐ மீண்டும் null ஆக set செய்யும்.

Refs கொண்டு DOM-ஐ manipulate செய்தல் பற்றி மேலும் படிக்கவும்.

useRef கொண்டு DOM-ஐ manipulate செய்யும் examples

Example 1 of 4:
Text input-க்கு focus செய்தல்

இந்த example-இல், button click செய்தால் input focus ஆகும்:

Fork

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Input-க்கு focus செய்
      </button>
    </>
  );
}

Ref contents மீண்டும் உருவாகாமல் தவிர்த்தல்

React initial ref value-ஐ ஒருமுறை save செய்து, அடுத்த renders-இல் அதை ignore செய்கிறது.

function Video() {
  const playerRef = useRef(new VideoPlayer());
  // ...

new VideoPlayer()-ன் result initial render-க்கு மட்டுமே பயன்படுத்தப்பட்டாலும், நீங்கள் இந்த function-ஐ ஒவ்வொரு render-க்கும் call செய்து கொண்டிருக்கிறீர்கள். இது expensive objects உருவாக்கினால் wasteful ஆகலாம்.

இதைக் தீர்க்க, ref-ஐ அதற்கு பதிலாக இவ்வாறு initialize செய்யலாம்:

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...

சாதாரணமாக, render போது ref.current write அல்லது read செய்வது அனுமதிக்கப்படாது. ஆனால் இந்த case-இல் result எப்போதும் அதே; condition initialization போது மட்டுமே execute ஆகிறது, ஆகவே இது முழுமையாக predictable.

Deep Dive

useRef-ஐ பின்னர் initialize செய்யும்போது null checks தவிர்ப்பது எப்படி

Type checker பயன்படுத்தி, எப்போதும் null check செய்ய விரும்பவில்லை என்றால், இதுபோன்ற pattern ஒன்றை முயற்சிக்கலாம்:

function Video() {
  const playerRef = useRef(null);

  function getPlayer() {
    if (playerRef.current !== null) {
      return playerRef.current;
    }
    const player = new VideoPlayer();
    playerRef.current = player;
    return player;
  }

  // ...

இங்கே, playerRef தானே nullable. ஆனால் getPlayer() null return செய்யும் case இல்லை என்பதை உங்கள் type checker-ஐ நம்ப வைக்க முடியும். பின்னர் உங்கள் event handlers-இல் getPlayer() பயன்படுத்தவும்.

Troubleshooting

Custom component-க்கு ref பெற முடியவில்லை

உங்கள் சொந்த component-க்கு இதுபோல் ref pass செய்ய முயன்றால்:

const inputRef = useRef(null);

return <MyInput ref={inputRef} />;

Console-இல் error கிடைக்கலாம்:

Console

TypeError: Cannot read properties of null

Default ஆக, உங்கள் சொந்த components அவற்றுக்குள் உள்ள DOM nodes-க்கு refs expose செய்யாது.

இதைக் சரிசெய்ய, ref பெற விரும்பும் component-ஐ கண்டுபிடிக்கவும்:

export default function MyInput({ value, onChange }) {
  return (
    <input
      value={value}
      onChange={onChange}
    />
  );
}

பின்னர் உங்கள் component ஏற்கும் props list-இல் ref சேர்த்து, தொடர்புடைய child built-in component-க்கு ref-ஐ prop ஆக pass செய்யவும்:

function MyInput({ value, onChange, ref }) {
  return (
    <input
      value={value}
      onChange={onChange}
      ref={ref}
    />
  );
};

export default MyInput;

பின்னர் parent component அதற்கான ref-ஐ பெற முடியும்.

மற்றொரு component-ன் DOM nodes-ஐ access செய்வது பற்றி மேலும் படிக்கவும்.

PrevioususeReducer

NextuseState