How do you create custom hooks?
Short answer: Custom hooks are just functions that use hooks. ✅ Example: 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;
Example code
} // Usage function Component() { const width = useWindowWidth();
return <p>Window width: {width}</p>;
}
Real-world example (ShopNest)
ShopNest’s cart icon uses useState for count and useEffect to load the cart once on mount.
Say this in the interview
- Define — one clear sentence (the short answer above).
- Example — relate it to a project like ShopNest or your real work.
- Trade-off — when you would not use it.
Share this Q&A
Share preview image: https://www.toolliyo.com/images/toolliyo-logo.png