🧩 React Custom Hooks — Reuse Logic Like a Pro

Custom hooks let you extract and reuse stateful logic across multiple components in React. They start with the word use and follow the same rules as built-in hooks.

🔁 Why use custom hooks?
• DRY (Don't Repeat Yourself) — avoid repeating the same logic
• Clean and readable code
• Easy testing and maintenance

👨‍🔧 Example: Create a custom hook to track window width

import { useState, useEffect } from "react";

function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

return width;
}

🧠 Usage in a component:

function App() {
const width = useWindowWidth();
return <p>Current width: {width}px</p>;
}

📌 Key points:
• Custom hooks must start with use
• You can use other hooks inside them (useState, useEffect, etc.)
• Great for abstracting logic like timers, form validation, fetching, etc.

Custom hooks make your React apps more modular and maintainable. A power move for every React developer!