Custom hooks let you extract and reuse stateful logic across multiple components.
⊞Code Example
import { useState, useEffect } from 'react';
// Custom hook to detect window dimensions
export function useWindowDimensions() {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth < 768);
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return { isMobile };
}