How do you create custom hooks?

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;
}

// Usage

function Component() {

const width = useWindowWidth();
return <p>Window width: {width}</p>;
}