useRef Hook
useRef(), EK, OBJECT, RETURN, KARTA, hai, { current: initialValue } — YE, OBJECT, COMPONENT, KE, POORE, LIFETIME, MEIN, SAME, REHTA, hai. .current, PROPERTY, MODIFY, KARNE, SE, RE-RENDER, TRIGGER, NAHI, HOTA — jaise, useState, KARTA, hai.
Do, MAIN, USE-CASES — (1) DOM, ELEMENTS, KO, DIRECTLY, ACCESS, KARNA (jaise, input.focus()). (2) MUTABLE, VALUES, STORE, KARNA, JO, RENDERS, KE, BEECH, PERSIST, HOTI, HAIN, LEKIN, RE-RENDER, TRIGGER, NAHI, KARTI (jaise, TIMER, ID, YA, PREVIOUS, VALUE).
function TextInput() {
const inputRef = React.useRef(null);
function focusInput() {
inputRef.current.focus(); // DOM element, DIRECTLY, access
}
return (
<>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</>
);
}- useRef = { current: value } object, JO, RE-RENDER TRIGGER NAHI karta
- DOM elements ko, DIRECTLY, ACCESS karne ke liye, COMMON use-case
- Mutable values, JO, renders ke BEECH, persist HOTI hain, LEKIN, re-render NAHI karti
Default, MEIN, ref PROP, EK, CUSTOM, COMPONENT, KO, PASS, NAHI, KI, JA, SAKTI (SIRF, DOM, ELEMENTS, jaise, <input>, PAR) — React.forwardRef(), SE, EK, COMPONENT, KO, ref, ACCEPT, KARNE, KE, LIYE, "OPT-IN" KIYA, JA, SAKTA, hai.
const FancyInput = React.forwardRef((props, ref) => (
<input ref={ref} className="fancy" {...props} />
));useRef, EK, COMMON, PATTERN, hai, "PREVIOUS, VALUE" TRACK, KARNE, KE, LIYE — useEffect, KE, ANDAR, ref.current, KO, UPDATE, KIYA, JAATA, hai, HAR, RENDER, KE, BAAD, TAAKI, AGLI, RENDER, MEIN, "PURANI" VALUE, SE, COMPARE, KIYA, JA, SAKE.
function usePrevious(value) {
const ref = useRef();
useEffect(() => { ref.current = value; });
return ref.current;
}