Custom Hooks — Extracting Reusable Logic

Custom hooks are React's answer to a simple question: what do you do when two components need the same logic but different UI?

Before hooks, the answer was messy — higher-order components, render props, or just copying and pasting. Custom hooks let you extract stateful logic into a function that any component can use, without any of that complexity.

If you've been using useState and useEffect inside your components, you already know 90% of what you need. A custom hook is just those same calls, wrapped in a function that starts with use.

Your First Custom Hook

Let's say you have two components that both need to track window size:

// Component A
function Dashboard() {
  const [width, setWidth] = useState(window.innerWidth);
 
  useEffect(() => {
    const handleResize =