Snippet

Encapsulating Logic with Custom Hooks

Custom hooks allow you to extract component logic into reusable functions. They must start with 'use' to follow React's rules of hooks.

snippet.js

javascript

function useWindowSize() {
  const [size, setSize] = useState(window.innerWidth);
 
  useEffect(() => {
    const handleResize = () => setSize(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
 
  return size;
}

react

Breakdown

function useWindowSize() {

Creates a reusable hook starting with 'use' prefix.

window.addEventListener('resize', handleResize);

Sets up an event listener when the component mounts.

return size;

Returns the state value for use in any component.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Encapsulating Logic with Custom Hooks

Related