useRef की Typing
In this page:
const ref = useRef<HTMLElementType>(null);DOM Element Refs को Type करना
एक DOM element के लिए बनाई ref को type करना — useRef<HTMLInputElement>(null) — .current को HTMLInputElement | null type देता है, यह match करते हुए कि component पहली बार render होने से पहले ref genuinely unattached शुरू होती है।
उदाहरण: Typing DOM Element Refs
import React, { useRef } from "react";
function TextInput(): React.JSX.Element {
const inputRef = useRef<HTMLInputElement>(null);
return <input ref={inputRef} />;
}
export default TextInput;Mutable Values को Type करना
एक mutable value रखने वाली ref जो एक DOM node नहीं है — जैसे एक timer ID — useRef<number>(initialValue) से typed होती है, और state के विपरीत, .current बदलने से कभी re-render trigger नहीं होता।
उदाहरण: Typing Mutable Values
import React, { useRef } from "react";
function Timer(): React.JSX.Element {
const timerId = useRef<number>(0);
timerId.current = 42;
return <p>Timer id stored: {timerId.current}</p>;
}
export default Timer;Nullable Values वाले Refs
क्योंकि एक DOM ref का .current null के रूप में शुरू होता है, इसे उपयोग करने वाली हर जगह को पहले एक null check चाहिए, जिसे TypeScript अपने आप enforce करता है एक बार ref को any के रूप में loosely नहीं बल्कि correctly type किया जाए।
उदाहरण: Refs with Nullable Values
import React, { useRef, useEffect } from "react";
function Focusable(): React.JSX.Element {
const ref = useRef<HTMLInputElement>(null);
useEffect(() => {
if (ref.current) ref.current.focus();
}, []);
return <input ref={ref} />;
}
export default Focusable;useEffect के साथ useRef
useRef को useEffect के साथ combine करना एक DOM node के real dimensions पढ़ने या mount के बाद इसे focus करने के लिए standard pattern है, क्योंकि ref effect चलने तक guaranteed रूप से attached होती है।
उदाहरण: useRef with useEffect
import React, { useRef, useEffect } from "react";
function Measured(): React.JSX.Element {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) console.log(ref.current.clientWidth);
}, []);
return <div ref={ref}>content</div>;
}
export default Measured;Custom Ref Values को Type करना
forwardRef के through forward की गई एक custom ref value को type करने के लिए ref के type को पहले generic argument के रूप में specify करना चाहिए, एक parent component को useImperativeHandle के through एक child द्वारा expose किए methods safely call करने देते हुए।
उदाहरण: Typing Custom Ref Values
import React, { forwardRef, useImperativeHandle } from "react";
interface InputHandle {
focus: () => void;
}
const CustomInput = forwardRef<InputHandle>((props, ref) => {
useImperativeHandle(ref, () => ({ focus: () => console.log("focused") }));
return <input />;
});
export default CustomInput;- बिना
nullकेuseRef<HTMLInputElement>()call करना, इसलिए.currentpossibly undefined typed है औरrefको pass नहीं किया जा सकता। - बिना null check के
inputRef.current.focus()उपयोग करना, जो error देता है क्योंकि.currentnullहो सकता है। - यह उम्मीद करना कि
ref.currentमें एक change component को re-render करे, जब refs renders trigger नहीं करते।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: