React Hook for Tracking Changes to Screen Size

When building responsive web applications, it's essential to be able to track changes to the screen size. This is important because different screen sizes may require different layouts, styles, or even components.

One way to track changes to the screen size is to use the window object's resize event. Whenever the window size changes, the resize event is fired, allowing us to update the layout, styles, or components as necessary.

In this article, we'll show you how to create an advanced React hook that tracks changes to the screen size using the resize event.

Creating the useScreenSize Hook

The useScreenSize hook is a custom React hook that uses the useState, useEffect, and useCallback hooks to track changes to the screen size.

Here's the code for the useScreenSize hook:

----------------------------------------------------------------

import { useState, useEffect, useCallback } from 'react';

function useScreenSize() {
    const [screenSize, setScreenSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight,
    });

    const handleResize = useCallback(() => {
        setScreenSize({
            width: window.innerWidth,
            height: window.innerHeight,
        });
    }, []);

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

    return screenSize;
}

export default useScreenSize;

----------------------------------------------------------------

Let's go through this code line by line:

• `import { useState, useEffect, useCallback } from 'react';`: We're importing the necessary hooks from the `react` library.
  
• `function useScreenSize() {`: This is the function that defines our hook.
  
• `const [screenSize, setScreenSize] = useState({`: We're using the `useState` hook to initialize our `screenSize` state with the current screen size.
  
• `width: window.innerWidth,`: We're setting the `width` property of our `screenSize` state to `window.innerWidth`, which is the current width of the window.
  
• `height: window.innerHeight,`: We're setting the `height` property of our `screenSize` state to `window.innerHeight`, which is the current height of the window.
  
• `const handleResize = useCallback(() => {`: We're using the `useCallback` hook to memoize our `handleResize` function, which updates the `screenSize` state whenever the `resize` event is fired.
  
• `setScreenSize({`: We're using the `setScreenSize` function to update our `screenSize` state.
  
• `width: window.innerWidth,`: We're setting the `width` property of our `screenSize` state to `window.innerWidth`, which is the current width of the window.
  
• `height: window.innerHeight,`: We're setting the `height` property of our `screenSize` state to `window.innerHeight`, which is the current height of the window.
  
• `}, []);`: We're passing an empty dependency array to `useCallback` to prevent unnecessary re-renders.
  
• `useEffect(() => {`: We're using the `useEffect` hook to listen for changes to the screen size and update our `screenSize` state accordingly.
  
• `window.addEventListener('resize', handleResize);`: We're adding an event listener to the `resize` event and calling our `handleResize` function whenever the event is fired.
  
• `return () => window.removeEventListener('resize', handleResize);`: We're returning a cleanup function that removes the event listener when the component unmounts.