!snippets useEffect

!snippet useEffect log window dimensions on resize

useEffect(() => {
  const listener = () => {
    console.log(window.innerWidth, window.innerHeight);
  };
  window.addEventListener('resize', listener);


  return () => {
    window.removeEventListener('resize', listener);
  };
}, []);

what is the purpose of a cleanup function here?

to remove global event listener, else it's left there and possibly more added when useEffect called again.

!snippet disable eslint deps

// eslint-disable-next-line react-hooks/exhaustive-deps

References