Implement useWindowSize Hook in React (Interview)

In React applications, creating responsive designs is important to provide a seamless user experience across various devices. In responsive design implementation, one common requirement is to know the size of the browser window to adapt the UI accordingly.

In this blog post, we'll delve into implementing a custom useWindowSize hook in React to dynamically track the window size changes.

Implementation of useWindowSize() hook

Let's start implementing custom hook named useWindowSize that will track the window size. We'll use the addEventListener() method to listen for window resize events.

const useWindowSize = () => {
    const [size, setSize] = React.useState({
        width: window.innerWidth,
        height: window.innerHeight
    });

    React.useEffect(() => {
        const handleResize = () => {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };

        window.addEventListener('resize', handleResize);

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

    return size;
};

Usage

Let's see how we can use the useWindowSize hook in a React component:

function App() {
    const { width, height } = useWindowSize();
    
    return (
        <div>
            <p>Window Width: {width}</p>
            <p>Window Height: {height}</p>
        </div>
    );
}

Explanation

In the useWindowSize hook, we initialize the state with the current window width and height. We then add an event listener for the resize event to update the state whenever the window size changes.

The hook returns an object containing the window width and height.

Optimization Considerations

For performance optimization, You can also use debounce in the handleResize function, this will help in reducing the number of state updates during rapid window resizing.

Further Reading 🚀

1. Top 20 Most Asked Custom Hooks in React
2. Best Resources to Ace React Interviews