React Refs ਅਤੇ useRef Hook ਦੀ ਵਰਤੋਂ ਕਰਨਾ

React ਇੱਕ declarative ਪਹੁੰਚ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ state ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹੋ, ਅਤੇ React UI ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ। ਇਹ ਜ਼ਿਆਦਾਤਰ ਕੰਮਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ।

ਪਰ ਕਦੇ-ਕਦੇ ਤੁਹਾਨੂੰ Virtual DOM ਤੋਂ ਬਾਹਰ ਜਾਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਤੁਹਾਨੂੰ ਸ਼ਾਇਦ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇੱਕ ਅਸਲੀ HTML element ਨੂੰ ਛੂਹਣ ਦੀ ਲੋੜ ਪਵੇ। ਇੱਥੇ ਹੀ Refs ਅਤੇ useRef hook ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

Ref ਕੀ ਹੈ?

Ref ਇੱਕ pointer ਹੈ। ਇਹ React ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇੱਕ native DOM node ਨਾਲ ਜੋੜਦਾ ਹੈ।

useState ਦੀ ਬਜਾਏ useRef ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰੀਏ?

State updates re-render ਨੂੰ trigger ਕਰਦੇ ਹਨ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ React ਸਕ੍ਰੀਨ 'ਤੇ component ਨੂੰ ਦੁਬਾਰਾ ਡਰਾਅ (redraw) ਕਰਦਾ ਹੈ। Ref updates re-render ਨੂੰ trigger ਨਹੀਂ ਕਰਦੇ। ਇਹ ਉਹਨਾਂ values ਲਈ ਬਿਲਕੁਲ ਸਹੀ ਹਨ ਜੋ ਬਦਲਦੀਆਂ ਹਨ ਪਰ ਉਹਨਾਂ ਨੂੰ ਤੁਰੰਤ UI ਵਿੱਚ ਦਿਖਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ।

ਆਮ ਵਰਤੋਂ ਦੇ ਮਾਮਲੇ: • ਕਿਸੇ input field ਨੂੰ ਆਪਣੇ ਆਪ focus ਕਰਨਾ। • video ਜਾਂ audio elements ਨੂੰ ਕੰਟਰੋਲ ਕਰਨਾ (play/pause)। • ਕਿਸੇ element ਦੀ ਚੌੜਾਈ (width) ਜਾਂ ਉਚਾਈ (height) ਨੂੰ ਮਾਪਣਾ। • intervals ਜਾਂ timeouts ਲਈ timer IDs ਨੂੰ ਸਟੋਰ ਕਰਨਾ।

useRef ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ:

  1. React ਤੋਂ useRef import ਕਰੋ।
  2. ਇਸਨੂੰ initialize ਕਰੋ: const myRef = useRef(null).
  3. ਇਸਨੂੰ ਇੱਕ element ਨਾਲ ਜੋੜੋ: <input ref={myRef} />.
  4. value ਤੱਕ ਪਹੁੰਚਣ ਲਈ ਵਰਤੋ: myRef.current.

ਉਦਾਹਰਣ 1: Input ਨੂੰ auto-focus ਕਰਨਾ

ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ (user) ਪੇਜ 'ਤੇ ਆਉਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਰਸਰ text box ਵਿੱਚ ਹੋਵੇ। ਤੁਸੀਂ component mount ਹੋਣ ਤੋਂ ਬਾਅਦ myRef.current.focus() ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ useEffect ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।

ਉਦਾਹਰਣ 2: ਇੱਕ Stopwatch

ਜੇਕਰ ਤੁਸੀਂ state ਵਿੱਚ setInterval ID ਸਟੋਰ ਕਰਦੇ ਹੋ, ਤਾਂ ਹਰ ਵਾਰ ਜਦੋਂ timer ਚੱਲਦਾ ਹੈ, component re-render ਹੁੰਦਾ ਹੈ। ਇਹ ਹੌਲੀ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ID ਨੂੰ ref ਵਿੱਚ ਸਟੋਰ ਕਰਦੇ ਹੋ, ਤਾਂ component ਤੇਜ਼ ਰਹਿੰਦਾ ਹੈ। Value ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਵਾਧੂ ਕੰਮ ਕੀਤੇ ਬਿਨਾਂ renders ਦੇ ਦੌਰਾਨ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੀ ਹੈ।

State ਬਨਾਮ Ref:

• State: Re-render ਨੂੰ trigger ਕਰਦਾ ਹੈ। UI data ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। Updates asynchronous ਹੁੰਦੇ ਹਨ। • Ref: ਕੋਈ re-render ਨਹੀਂ। DOM access ਅਤੇ memory ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। Updates synchronous ਹੁੰਦੇ ਹਨ।

Seniors ਲਈ Pro Tips:

• ਬਹੁਤ ਜ਼ਿਆਦਾ ਵਰਤੋਂ ਤੋਂ ਬਚੋ। Refs ਦੀ ਵਰਤੋਂ ਉਦੋਂ ਹੀ ਕਰੋ ਜਦੋਂ declarative logic ਕੰਮ ਨਾ ਕਰੇ। • Memory ਨੂੰ ਸਾਫ਼ (clean up) ਕਰੋ। ਹਮੇਸ਼ਾ ਆਪਣੇ cleanup function ਵਿੱਚ intervals ਜਾਂ event listeners ਨੂੰ clear ਕਰੋ। • Rendering ਦੌਰਾਨ refs ਵਿੱਚ ਲਿਖੋ ਨਾ। ਸਿਰਫ਼ useEffect ਜਾਂ event handlers ਦੇ ਅੰਦਰ ref.current ਨੂੰ ਅਪਡੇਟ ਕਰੋ। ਇਹ side effects ਨੂੰ ਰੋਕਦਾ ਹੈ। • forwardRef ਦੀ ਵਰਤੋਂ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ custom child component ਨੂੰ ref pass ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਉਸ child ਨੂੰ React.forwardRef ਵਿੱਚ ਲਪੇਟਣਾ (wrap) ਪਵੇਗਾ।

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde