React Refs ಮತ್ತು useRef Hook ಅನ್ನು ಬಳಸುವುದು

React ಒಂದು declarative ವಿಧಾನವನ್ನು ಬಳಸುತ್ತದೆ. ನೀವು state ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ, React UI ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಇದು ಹೆಚ್ಚಿನ ಕೆಲಸಗಳಿಗೆ ಇದು ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಆದರೆ ಕೆಲವೊಮ್ಮೆ ನೀವು Virtual DOM ಹೊರಗೆ ಹೋಗಬೇಕಾಗುತ್ತದೆ. ನೀವು ನೇರವಾಗಿ ಒಂದು ನೈಜ HTML ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸ್ಪರ್ಶಿಸುವ ಅಗತ್ಯವಿರಬಹುದು. ಇಲ್ಲಿಯೇ Refs ಮತ್ತು useRef hook ಬಳಕೆಯಾಗುತ್ತವೆ.

What is a Ref? Ref ಎಂಬುದು ಒಂದು પોಯಂಟರ್. ಇದು React ಅನ್ನು ನೇರವಾಗಿ native DOM ನೋಡ್‌ಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ.

Why use useRef instead of useState? State ಅಪ್‌ಡೇಟ್‌ಗಳು re-render ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತವೆ. ಅಂದರೆ React ಸ್ಕ್ರೀನ್ ಮೇಲೆ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮತ್ತೆ ಬಿಡಿಸುತ್ತದೆ (redraw). Ref ಅಪ್‌ಡೇಟ್‌ಗಳು re-render ಅನ್ನು ಪ್ರಚೋದಿಸುವುದಿಲ್ಲ. ಬದಲಾಗುವ ಆದರೆ ತಕ್ಷಣವೇ UI ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಅಗತ್ಯವಿಲ್ಲದ ಮೌಲ್ಯಗಳಿಗೆ ಇದು ಅತ್ಯುತ್ತಮವಾಗಿದೆ.

Common use cases: • ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಫೋಕಸ್ ಮಾಡುವುದು. • ವಿಡಿಯೋ ಅಥವಾ ಆಡಿಯೋ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿಯಂತ್ರಿಸುವುದು (play/pause). • ಎಲಿಮೆಂಟ್‌ನ ಅಗಲ ಅಥವಾ ಎತ್ತರವನ್ನು ಅಳೆಯುವುದು. • intervals ಅಥವಾ timeouts ಗಾಗಿ timer IDs ಅನ್ನು ಸಂಗ್ರಹಿಸುವುದು.

How to use useRef:

  1. React ನಿಂದ useRef ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಿ.
  2. ಅದನ್ನು ಇನಿಶಿಯಲೈಸ್ ಮಾಡಿ: const myRef = useRef(null).
  3. ಅದನ್ನು ಎಲಿಮೆಂಟ್‌ಗೆ ಅಟ್ಯಾಚ್ ಮಾಡಿ: <input ref={myRef} />.
  4. myRef.current ಮೂಲಕ ಮೌಲ್ಯವನ್ನು ಪಡೆಯಿರಿ.

Example 1: Auto-focusing an input ಬಳಕೆದಾರನು ಪುಟವನ್ನು ಪ್ರವೇಶಿಸಿದಾಗ, ಕರ್ಸರ್ ಟೆಕ್ಸ್ಟ್ ಬಾಕ್ಸ್‌ನಲ್ಲಿರಬೇಕೆಂದು ನೀವು ಬಯಸುತ್ತೀರಿ. ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದ ನಂತರ myRef.current.focus() ಅನ್ನು ಕರೆಯಲು ನೀವು useEffect ಅನ್ನು ಬಳಸುತ್ತೀರಿ.

Example 2: A Stopwatch ನೀವು setInterval ID ಅನ್ನು state ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿದರೆ, ಪ್ರತಿ ಬಾರಿ ಟೈಮರ್ ಟಿಕ್ ಆದಾಗಲೂ ಕಾಂಪೊನೆಂಟ್ re-render ಆಗುತ್ತದೆ. ಇದು ನಿಧಾನವಾಗಿರುತ್ತದೆ. ನೀವು ID ಅನ್ನು ref ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿದರೆ, ಕಾಂಪೊನೆಂಟ್ ವೇಗವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಮೇಲೆ ಹೆಚ್ಚಿನ ಕೆಲಸದ ಹೊರೆಯನ್ನು ಹಾಕದೆ, ಮೌಲ್ಯವು re-renders ಗಳ ನಡುವೆ ಸುರಕ್ಷಿತವಾಗಿರುತ್ತದೆ.

State vs Ref: • State: re-render ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. UI ಡೇಟಾಕ್ಕಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಅಪ್‌ಡೇಟ್‌ಗಳು asynchronous ಆಗಿರುತ್ತವೆ. • Ref: re-render ಆಗುವುದಿಲ್ಲ. DOM ಅಕ್ಸೆಸ್ ಮತ್ತು ಮೆಮೊರಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಅಪ್‌ಡೇಟ್‌ಗಳು synchronous ಆಗಿರುತ್ತವೆ.

Pro Tips for Seniors: • ಅತಿಯಾದ ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸಿ. declarative ಲಾಜಿಕ್ ವಿಫಲವಾದಾಗ ಮಾತ್ರ refs ಬಳಸಿ. • ಮೆಮೊರಿಯನ್ನು ಕ್ಲೀನ್ ಅಪ್ ಮಾಡಿ. ನಿಮ್ಮ cleanup ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಯಾವಾಗಲೂ intervals ಅಥವಾ event listeners ಅನ್ನು ಕ್ಲಿಯರ್ ಮಾಡಿ. • ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ refs ಗೆ ಬರೆಯಬೇಡಿ. useEffect ಅಥವಾ event handlers ಒಳಗೆ ಮಾತ್ರ ref.current ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ. ಇದು side effects ಅನ್ನು ತಡೆಯುತ್ತದೆ. • forwardRef ಬಳಸಿ. ನೀವು ಕಸ್ಟಮ್ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ref ಅನ್ನು ವರ್ಗಾಯಿಸಲು ಬಯಸಿದರೆ, ಆ ಚೈಲ್ಡ್ ಅನ್ನು React.forwardRef ನಲ್ಲಿ ಸುತ್ತಬೇಕು (wrap).

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