React useOnWindowResize hook

React, Hooks, Effect, Event · Dec 1, 2021

Executes a callback whenever the window is resized.

  • Use the useRef() hook to create a variable, listener, which will hold the listener reference.
  • Use the useEffect() hook and EventTarget.addEventListener() to listen to the 'resize' event of the Window global object.
  • Use EventTarget.removeEventListener() to remove any existing listeners and clean up when the component unmounts.
const useOnWindowResize = callback => {
  const listener = React.useRef(null);

  React.useEffect(() => {
    if (listener.current)
      window.removeEventListener('resize', listener.current);
    listener.current = window.addEventListener('resize', callback);
    return () => {
      window.removeEventListener('resize', listener.current);
    };
  }, [callback]);
};
const App = () => {
  useOnWindowResize(() =>
    console.log(`window size: (${window.innerWidth}, ${window.innerHeight})`)
  );
  return <p>Resize the window and check the console</p>;
};

ReactDOM.render(<App />, document.getElementById('root'));

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this