Menu

gitpiper

useOnWindowResize react Code Snippet in 2024

hookseffecteventintermediate

Last Updated: 24 March 2024

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'));

react snippet similar to useOnWindowResize For You in March 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️