Hooks की Typing (useState, useEffect)
In this page:
const [state, setState] = useState<Type>(initial);
useEffect(() => {
// effect
return () => { /* cleanup */ };
}, [dependencies]);useState को Type करना
useState को type करना वही inference-or-explicit-generic pattern follow करता है जो कहीं और भी है — TypeScript initial value से infer करता है, या आप explicitly useState<T>() supply करते हैं जब initial value अकेले पूरा intended type capture नहीं कर सकता।
उदाहरण: Typing useState
import React, { useState } from "react";
function Toggle(): React.JSX.Element {
const [on, setOn] = useState(false);
return <p>{on ? "On" : "Off"}</p>;
}
export default Toggle;useEffect को Type करना
useEffect का callback खुद एक generic के साथ typed नहीं है — इसका return value void या एक cleanup function तक restricted है, और TypeScript एक ऐसे effect को flag करेगा जो गलती से कुछ और return करे, जैसे एक Promise।
उदाहरण: Typing useEffect
import React, { useEffect } from "react";
function Logger(): React.JSX.Element {
useEffect(() => {
console.log("Mounted");
}, []);
return <p>Logged</p>;
}
export default Logger;Typed Data Fetching
एक effect के अंदर typed data fetching का आमतौर पर मतलब है fetched response को exactly उसी जगह एक interface के against type करना जहां इसे parse किया जा रहा हो, इसलिए बाकी component fetched data को any treat करने के बजाय उस shape पर rely कर सकता है।
उदाहरण: Typed Data Fetching
import React, { useEffect, useState } from "react";
interface User {
name: string;
}
function Profile(): React.JSX.Element {
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
setUser({ name: "Ravi" });
}, []);
return <p>{user?.name}</p>;
}
export default Profile;Cleanup Functions
useEffect से returned एक cleanup function () => void typed है, और यह वह है जो React अपने आप call करता है जब component unmount होता है या effect फिर से run होने से पहले — किसी subscription जैसी चीज़ के लिए एक cleanup function omit करना एक आम bug है।
उदाहरण: Cleanup Functions
import React, { useEffect } from "react";
function Timer(): React.JSX.Element {
useEffect(() => {
const id = setInterval(() => console.log("tick"), 1000);
return () => clearInterval(id);
}, []);
return <p>Timer running</p>;
}
export default Timer;Typed Effects अलग करना
Typed effects को अलग useEffect calls में अलग करना (हर एक अपने tightly-scoped dependency array के साथ) एक बड़े effect से type करना easier है जो कई unrelated concerns और dependencies एक साथ handle करता हो।
उदाहरण: Separating Typed Effects
import React, { useEffect } from "react";
function Widget({ id }: { id: number }): React.JSX.Element {
useEffect(() => {
console.log("id changed", id);
}, [id]);
useEffect(() => {
console.log("mounted once");
}, []);
return <p>Widget {id}</p>;
}
export default Widget;useEffectcallback कोasyncबनाना, जोvoidया एक cleanup function के बजाय एक Promise return करता है।- Dependency array
[]भूल जाना, इसलिए effect हर render के बाद चलता है। - Fetched data को type न करना, इसलिए
setData(await res.json())anyaccept करता है और mistakes छुपाता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: