आपका पहला Custom Hook बनाना
In this page:
function useHookName(parameter) {
const [state, setState] = useState(parameter);
// shared stateful logic
return { state, setState };
}
const { state } = useHookName(argument);What Problem Custom Hooks Solve
जब दो अलग components को same piece of stateful logic चाहिए, जैसे window size track करना या एक counter, उस logic को दोनों components में copy करना code को duplicate करता है और updates को error-prone बनाता है।
एक custom hook आपको वह logic एक बार एक reusable function के रूप में लिखने देता है। कोई भी component फिर same behavior पाने के लिए इसे call कर सकता है।
उदाहरण: What Problem Custom Hooks Solve
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useCounter(start) {
const [count, setCount] = React.useState(start);
const increment = () => setCount(c => c + 1);
return { count, increment };
}
function App() {
const { count, increment } = useCounter(0);
return <button onClick={increment}>Count: {count}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>The 'use' Naming Convention
एक custom hook के नाम की शुरुआत lowercase use से होनी चाहिए, जैसे useCounter या useFetch। यह सिर्फ एक style choice नहीं है — React का linter और rules-of-hooks system यह जानने के लिए इस prefix का उपयोग करते हैं कि एक function के अंदर दूसरे hooks call करना allowed है।
use prefix के बिना एक regular helper function useState या useEffect को safely call नहीं कर सकता।
उदाहरण: The 'use' Naming Convention
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useToggleValue(initial) {
const [value, setValue] = React.useState(initial);
const toggle = () => setValue(v => !v);
return [value, toggle];
}
function App() {
const [isOn, toggle] = useToggleValue(false);
return <button onClick={toggle}>{isOn ? "ON" : "OFF"}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Building Your First Custom Hook
एक custom hook बनाने के लिए, एक normal JavaScript function लिखें, इसके अंदर एक या ज़्यादा built-in hooks call करें, और वो data या functions return करें जो calling component को चाहिए।
यह example useWindowWidth बनाता है, जो browser window की width track करता है और resize पर automatically update होता है।
उदाहरण: Building Your First Custom Hook
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function useWindowWidth() {
const [width, setWidth] = React.useState(window.innerWidth);
React.useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return width;
}
function App() {
const width = useWindowWidth();
return <p>Window width: {width}px</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Function के नाम को use prefix करना भूल जाना, जो React के rules-of-hooks linting और hook detection को तोड़ता है।
- Same useState+useEffect logic को कई components में copy-paste करना इसे एक custom hook में extract करने के बजाय।
- एक custom hook को conditionally call करना (एक if-statement के अंदर), जो built-in hooks पर apply होने वाले same rules को violate करता है।
- एक custom hook एक JavaScript function है जिसके नाम की शुरुआत use से होती है और जो अपने अंदर दूसरे hooks call करता है।
- Custom hooks आपको कई components में stateful logic extract और reuse करने देते हैं।
- वे built-in hooks पर apply होने वाले same rules of hooks follow करते हैं (सिर्फ top-level calls, कोई conditionals नहीं)।
- एक custom hook उपयोग करने वाला हर component अपनी own independent state पाता है, shared नहीं।
React 16.8 (Hooks introduction) से available है — custom hooks बस plain functions हैं built-in hooks के ऊपर बने।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: