Demo mode — data resets on refresh.
Hooks Deep Dive
Custom Hooks
Extracting Logic into Custom Hooks
Custom hooks let you extract component logic into reusable functions. A custom hook is any function whose name starts with "use" and that calls other hooks.
Example: useWindowSize
function useWindowSize() {
const [size, setSize] = useState({ width: 0, height: 0 })
useEffect(() => { ... }, [])
return size
}
Benefits
Custom hooks dramatically improve code reuse. Instead of duplicating logic across components, you centralize it in a hook. They make components cleaner and easier to test.
Knowledge Check
1.When does useEffect run by default?
2.What problem does useContext solve?
3.How do you name a custom hook?