ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ಡೇಟಾವನ್ನು ಜೀವಂತವಾಗಿಡಲು React ನಿಮಗೆ ಎರಡು ಮಾರ್ಗಗಳನ್ನು ನೀಡುತ್ತದೆ: useState ಮತ್ತು useRef. ಮೇಲ್ನೋಟಕ್ಕೆ ಇವೆರಡೂ ಒಂದೇ ರೀತಿ ಕಾಣುತ್ತವೆ. ಎರಡೂ ನೀವು ಓದಬಹುದಾದ ಮೌಲ್ಯವನ್ನು ನೀಡುತ್ತವೆ, ಎರಡೂ re-renders ಸಮಯದಲ್ಲಿ ಉಳಿಯುತ್ತವೆ ಮತ್ತು ಎರಡೂ ಒಂದು ಕ್ಲಿಕ್‌ನಿಂದ ಮುಂದಿನ ಕ್ಲಿಕ್‌ವರೆಗೆ ಮೌಲ್ಯವನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ. ಆದರೆ, ತಪ್ಪು ಆಯ್ಕೆ ಮಾಡಿದರೆ, ಪರದೆ ಅಪ್‌ಡೇಟ್ ಆಗದಿರಬಹುದು ಅಥವಾ ಅನಗತ್ಯ re-renders ಗಳ ಸುಳಿಯಲ್ಲಿ ಸಿಲುಕಬಹುದು. ಈ ಆಯ್ಕೆಯು ಸಿಂಟ್ಯಾಕ್ಸ್ (syntax) ಬಗ್ಗೆ ಅಲ್ಲ. ಬದಲಾಗಿ, React ಗೆ ಆ ವಿಷಯದ ಬಗ್ಗೆ ತಿಳಿಯಬೇಕೇ ಅಥವಾ ಬೇಡವೇ ಎಂಬುದರ ಬಗ್ಗೆ ಇದೆ.

ಪ್ರತಿಯೊಂದು Hook ನ ನಿಜವಾದ ಕೆಲಸವೇನು

useState ಎಂಬುದು ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಜೊತೆ ಸಂವಹನ ನಡೆಸಲು React ಬಳಸುವ ಅಧಿಕೃತ ಮಾರ್ಗವಾಗಿದೆ. ನೀವು ಇದನ್ನು ಕರೆ ಮಾಡಿದಾಗ, ನಿಮಗೆ ಒಂದು ಮೌಲ್ಯ (value) ಮತ್ತು ಒಂದು setter function ಸಿಗುತ್ತದೆ. React ಆ ಮೌಲ್ಯವನ್ನು ಕಾಂಪೊನೆಂಟ್‌ನ ಅಸ್ತಿತ್ವದ ಭಾಗವಾಗಿ ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ. Setter ಕಾರ್ಯನಿರ್ವಹಿಸಿದಾಗ, "ಏನೋ ಬದಲಾಗಿದೆ" ಎಂದು React ತಿಳಿಯುತ್ತದೆ ಮತ್ತು ಪರದೆಯು ಅಪ್‌ಡೇಟ್ ಆಗಲು ಹೊಸ render ಅನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.

ಇನ್ನೊಂದೆಡೆ, useRef ಎಂಬುದು ಕೇವಲ current ಪ್ರಾಪರ್ಟಿ ಹೊಂದಿರುವ ಒಂದು ಸಾಮಾನ್ಯ JavaScript object ಆಗಿದೆ. ಪ್ರತಿ render ಸಮಯದಲ್ಲಿಯೂ ಅದೇ object reference ಅನ್ನು ನಿಮಗೆ ನೀಡುವ ಭರವಸೆಯನ್ನು React ನೀಡುತ್ತದೆ. ಅದರ ಒಳಗಡೆ ಏನಿದೆ ಎಂಬುದನ್ನು React ಗಮನಿಸುವುದಿಲ್ಲ. someRef.current ಅನ್ನು ಬದಲಾಯಿಸುವುದು (mutating) ಮೌನವಾಗಿ ನಡೆಯುತ್ತದೆ. React ಅದಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸುವುದಿಲ್ಲ.

ಆ ಮೌನವೇ ಇದರ ಮುಖ್ಯ ಉದ್ದೇಶ. Refs ಎಂಬುದು ಒಂದು escape hatch ಇದ್ದಂತೆ, ಅದು state ಗೆ ಪರ್ಯಾಯವಲ್ಲ.

Rendering ನಡುವಿನ ವ್ಯತ್ಯಾಸ

ನೀವು state ಅನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಕಾಂಪೊನೆಂಟ್ re-render ಆಗುತ್ತದೆ. ಹೆಚ್ಚಿನ ಆರಂಭಿಕರು ನಿರೀಕ್ಷಿಸುವ ವರ್ತನೆ ಇದೇ ಆಗಿದೆ, ಮತ್ತು ಹೊಸ ಡೇಟಾ ಪರದೆಯ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾದಾಗ ನಿಮಗೆ ಇದೇ ಬೇಕಾಗುತ್ತದೆ. ಒಂದು counter, form field, ಅಥವಾ ಬಳಕೆದಾರರ ಪಟ್ಟಿ (fetched list of users)—ಬಳಕೆದಾರರಿಗೆ ಅದು ಕಾಣಿಸಬೇಕೆಂದರೆ, ಅದು ಬಹುಶಃ state ನಲ್ಲೇ ಇರಬೇಕು. state ಬದಲಾವಣೆಗಳು DOM ಅನ್ನು sync ಮಾಡಲು renderer ಗೆ ಸೂಚನೆ ನೀಡುತ್ತವೆ ಎಂಬ ಕಲ್ಪನೆಯ ಸುತ್ತಲೇ React ನ ಸಂಪೂರ್ಣ ಡೇಟಾ ಫ್ಲೋ ನಿರ್ಮಿತವಾಗಿದೆ.

ನೀವು ref ಅನ್ನು ಬದಲಾಯಿಸಿದರೆ, ದೃಶ್ಯತತೆಯಲ್ಲಿ (visually) ಏನೂ ಬದಲಾಗುವುದಿಲ್ಲ. Variable ತಕ್ಷಣವೇ ಮತ್ತು synchronously ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ, ಆದರೆ ಕಾಂಪೊನೆಂಟ್ re-render ಆಗುವುದಿಲ್ಲ. ಇದು ಕಾಂಪೊನೆಂಟ್‌ನ ಒಳಗಿನ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳಿಗೆ ಸಹಾಯ ಮಾಡುವ, ಆದರೆ ದೃಶ್ಯ ರೂಪದಲ್ಲಿ ಕಾಣಿಸದ ಮೌಲ್ಯಗಳಿಗೆ refs ಅತ್ಯುತ್ತಮವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ timer IDs, ಹಿಂದಿನ prop snapshots, ಅಥವಾ direct DOM handles ಇವುಗಳನ್ನು ಗಮನಿಸಿ. ಒಂದು carousel autoplay ಅನ್ನು ನಡೆಸುವ interval ID ಬಗ್ಗೆ UI ಗೆ ಕಾಳಜಿಯಿಲ್ಲ; ಯಾವ slide ಕಾಣಿಸುತ್ತಿದೆ ಎಂಬ ಬಗ್ಗೆ ಮಾತ್ರ ಅದಕ್ಕೆ ಕಾಳಜಿ ಇರುತ್ತದೆ. ಆದ್ದರಿಂದ interval ID ಅನ್ನು ref ನಲ್ಲಿ ಇಡಬೇಕು.

State ಯಾವಾಗ ಸರಿಯಾದ ಸಾಧನವಾಗುತ್ತದೆ

ಯಾವುದೇ ಮೌಲ್ಯವು ನಿಮ್ಮ UI ನ ಮೇಲ್ಮೈಯ ಭಾಗವಾಗಿದ್ದಾಗ useState ಅನ್ನು ಬಳಸಿ.

Input fields ಇದಕ್ಕೆ ಸ್ಪಷ್ಟ ಉದಾಹರಣೆ. ಬಳಕೆದಾರರು ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ಟೈಪ್ ಮಾಡಿದಾಗ, ನೀವು ಅದನ್ನು ಪರಿಶೀಲಿಸಿ (validate) ಬಾಕ್ಸ್ ಕೆಳಗೆ ದೋಷ ಸಂದೇಶವನ್ನು (error message) ತೋರಿಸಬೇಕೆಂದರೆ, ಆ ಇಮೇಲ್ string ಗೆ state ಅಗತ್ಯವಿದೆ. Validation logic ಮತ್ತು error banner ಎರಡೂ ಇತ್ತೀಚಿನ ಮೌಲ್ಯದ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿವೆ, ಮತ್ತು state ನಿಂದ re-render ಪ್ರಾರಂಭವಾದ ಕಾರಣವಷ್ಟೇ React ಆ banner ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.

Counts ಮತ್ತು toggles ಮತ್ತೊಂದು ಪ್ರಮುಖ ಅಂಶ. ಸ್ಕೋರ್ ಅನ್ನು ಹೆಚ್ಚಿಸುವ ಬಟನ್, modal open/close flag, ಅಥವಾ tab index—ಇವೆಲ್ಲವೂ state ಮೂಲಕವೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಏಕೆಂದರೆ ಮೌಲ್ಯದೊಂದಿಗೆ render output ಕೂಡ ಬದಲಾಗುತ್ತದೆ. ಒಂದು search string ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ filtered list ನಂತಹ derived values ಕೂಡ ಸಾಮಾನ್ಯವಾಗಿ state ನಿಂದಲೇ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ, ಏಕೆಂದರೆ ಮೂಲ ಮೌಲ್ಯವು ಬಳಕೆದಾರರಿಗೆ ಕಾಣಿಸುತ್ತದೆ.

ಇಲ್ಲಿ ಸಮಯದ (timing) ಬಗ್ಗೆ ಒಂದು ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ. State ಅಪ್‌ಡೇಟ್‌ಗಳು asynchronous ಮತ್ತು batched ಆಗಿರುತ್ತವೆ. ನೀವು ಒಂದು event handler ಒಳಗೆ ಮೂರು ಬಾರಿ setCount(count + 1) ಎಂದು ಕರೆದರೆ, React ಮೂರು ಬಾರಿ render ಮಾಡುವುದಿಲ್ಲ. ಅದು ಎಲ್ಲವನ್ನೂ ಒಂದೇ ಅಪ್‌ಡೇಟ್ ಆಗಿ batch ಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿರುವ function ಒಳಗೆ ಇರುವ count variable ಕೂಡ ಮುಂದಿನ render ವರೆಗೆ ಹಳೆಯ ಮೌಲ್ಯವನ್ನೇ (stale) ಹೊಂದಿರುತ್ತದೆ. ಈ batching ಒಂದು ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ (feature). ಇದು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ವೇಗವಾಗಿಡುತ್ತದೆ. ಆದರೆ ಇದರರ್ಥ, ನೀವು state variable ತಕ್ಷಣವೇ ಮುಂದಿನ ಸಾಲಿನಲ್ಲಿಯೇ ಹೊಸ ಮೌಲ್ಯವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಎಂದು ನಿರೀಕ್ಷಿಸುವಂತಿಲ್ಲ.

Refs ಯಾವಾಗ ಉಪಯುಕ್ತವಾಗುತ್ತವೆ

plumbing ಗಾಗಿ useRef ಬಳಸಿ, ಆದರೆ