Answer
A custom hook is simply a JavaScript function whose name starts with use, and it lets you reuse stateful logic between different components without repeating the same code. It can call other hooks inside it, like useState or useEffect, just like a regular component can.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
function handleResize() { setWidth(window.innerWidth); }
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}Real-world example A shopping site uses a single useWindowWidth custom hook in both its navigation bar and its product grid, so both components can react to screen size changes without duplicating the same resize logic twice.