Custom Hooks
Custom hook, EK, JavaScript, FUNCTION, hai, JISKA, NAAM, "use" SE, SHURU, HOTA, hai (jaise, useWindowSize), aur, JO, INTERNALLY, DUSRE, HOOKS (useState, useEffect) USE, KARTA, hai — STATEFUL, LOGIC, KO, COMPONENTS, KE, BEECH, SHARE, KARNE, KA, MODERN, WAY.
Custom hooks, "SHARE, LOGIC", KARTE, HAIN, "SHARE, STATE", NAHI — HAR, COMPONENT, JO, EK, CUSTOM, HOOK, USE, KARTA, hai, USKA, APNA, INDEPENDENT, STATE, HOTA, hai. YE, HOC (Higher-Order Components) aur, RENDER, PROPS, KE, "WRAPPER, HELL" PROBLEM, KO, SOLVE, KARTA, hai.
function useWindowSize() {
const [size, setSize] = React.useState({ width: window.innerWidth, height: window.innerHeight });
React.useEffect(() => {
function handleResize() {
setSize({ width: window.innerWidth, height: window.innerHeight });
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return size;
}
// Usage — MULTIPLE components mein, REUSE:
function MyComponent() {
const { width, height } = useWindowSize();
return <p>Window: {width} x {height}</p>;
}- Custom hook = "use" se, SHURU, HONE WALA, function, JO, dusre hooks, USE karta hai
- Stateful LOGIC, share karta hai — state NAHI (har component, INDEPENDENT state)
- Rules of Hooks: top-level PAR call, sirf, React functions SE
EK, COMMON, CUSTOM, HOOK, EXAMPLE — useLocalStorage(key, initialValue), useState, aur, useEffect, KO, COMBINE, KARТA, hai, TAAKI, STATE, AUTOMATICALLY, localStorage, MEIN, PERSIST, HO — POORE, APP, MEIN, REUSE, HO, SAKTA, hai.
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() =>
JSON.parse(localStorage.getItem(key)) ?? initialValue);
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}Custom, HOOKS, ko, @testing-library/react, KE, renderHook() UTILITY, SE, TEST, KIYA, JA, SAKTA, hai — EK, DUMMY, COMPONENT, MANUALLY, BANANE, KI, ZAROORAT, NAHI. YE, "Testing React Apps" CATEGORY, MEIN, DETAIL, MEIN, COVER, KIYA, GAYA, hai.