React UseWindowSize Guide: Build A Dynamic UI Easily

In the ever-evolving landscape of web development, creating responsive React applications that adapt seamlessly to various screen sizes is paramount. Understanding and managing the browser window width and other dimensions ensures that your app delivers an optimal user experience across devices.

This blog delves into crafting a custom useWindowSize hook, enabling React components to access and respond to window size changes effectively.

Introduction to Responsive React Apps

Responsive design is a cornerstone of modern web development, ensuring that applications look and function well on a variety of devices and screen sizes. In the context of React, achieving responsive design involves dynamically adjusting the layout and elements based on the dimensions of the browser window. This is where the custom useWindowSize hook comes into play. By leveraging this hook, developers can easily access the current width and height of the browser window, allowing for real-time adjustments that enhance the user experience. The useWindowSize hook simplifies the process of creating responsive React apps, making it a valuable tool in any developer’s toolkit.

Understanding Window Dimensions in React

Every React app interacts with the window object to determine the current width and height of the browser window. By accessing the window dimensions, developers can tailor components to render appropriately based on the screen size. Whether you're designing for desktop or mobile applications, accurately tracking the window's width and height is crucial for responsive design.

Creating the useWindowSize Hook

To streamline the process of tracking window size, we'll create a custom hook named useWindowSize. This hook leverages the power of useState and useEffect hooks to monitor and update the window dimensions dynamically.

Copy
// useWindowSize.js
import { useState, useEffect } from 'react';

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

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

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

  return windowSize;
};

export default useWindowSize;

How the Custom Hook Works

The useWindowSize hook operates by utilizing two fundamental React hooks: useState and useEffect. Initially, useState is employed to store the current window dimensions within the component’s state. This state is then dynamically updated through the useEffect hook, which sets up an event listener for the window’s resize event. Whenever the window is resized, the event listener triggers the handleResize function, updating the state with the new window dimensions. The hook ultimately returns an object containing the current width and height of the window. This object can be used within React components to adjust layouts and elements, ensuring that the app remains responsive to changes in window size.

Managing State with useState and useEffect Hooks

The useState hook initializes the windowSize state with the current width and height of the browser window. Meanwhile, the useEffect hook sets up an event listener for the resize event, ensuring that any change in window size updates the state accordingly. This combination allows React components to access real-time window dimensions effortlessly.

Adding Event Listeners for Resize Events

Handling window resizing involves adding an event listener for the event. This listener invokes the function, updating the state with the new dimensions. By monitoring the window's width and height, components can adjust their layout dynamically to maintain responsiveness.

Preventing Memory Leaks with Cleanup Functions

It's essential to include a cleanup function within the hook to remove the event listener when the component unmounts. This practice prevents potential memory leaks by ensuring that the application doesn't retain unnecessary references to the object after the component is no longer in use.

Utilizing the Hook in Components

Integrating the hook into your React components is straightforward. By importing and invoking the hook, components gain access to the current window size, enabling conditional rendering based on screen dimensions.

Handling Window Resize in Mobile Applications

Mobile applications often experience frequent changes in screen size due to device rotation or multitasking. The hook ensures that your React app remains responsive by updating components in real-time as the browser window dimensions fluctuate, providing a seamless user experience across all devices.

Ensuring Performance with

To enhance performance, especially in complex applications, integrating the hook can optimize the function. This prevents unnecessary re-creations of the function on every render, ensuring that event listeners remain efficient and do not degrade application performance.

Visualizing Window Size Changes with Mermaid

Understanding the flow of the hook can be simplified with a Mermaid diagram. This visualization illustrates how the hook interacts with the window object, manages state, and updates components upon window resizing.

Testing the Hook

Testing the hook involves simulating window resize events and verifying that the hook accurately updates the window dimensions. Tools like Jest and React Testing Library can facilitate comprehensive testing, ensuring that components respond correctly to changes in window size.

Optimizing with Throttling and Debouncing

To further optimize performance, especially during rapid resize events, implementing throttling or debouncing techniques can limit the frequency of state updates. This ensures that the application remains responsive without overwhelming the browser with excessive event listeners.

Extending the Hook

The hook can be extended to include additional functionalities, such as tracking other window properties or integrating with other custom hooks. This flexibility allows developers to tailor the hook to specific application requirements, enhancing its utility across various components.

Best Practices for Responsive React Apps

Creating responsive React apps requires adherence to best practices that ensure a seamless user experience across various devices and screen sizes. Here are some key practices to consider:

• Leverage the Hook: Use the hook to access the current window dimensions and adjust your layout and elements accordingly.

• Utilize Media Queries: Define different styles for different screen sizes and devices using CSS media queries.

• Employ Flexible Units: Use flexible units such as percentages and ems for defining element sizes and margins, rather than fixed units like pixels.

• Avoid Fixed Units: Fixed units can lead to layouts that do not adapt well to different screen sizes, so it’s best to avoid them.

• Test Across Devices: Regularly test your React app on various devices and screen sizes to ensure a consistent and seamless user experience.

By following these best practices and incorporating the hook, you can develop responsive React apps that adapt fluidly to different screen sizes and devices, ultimately providing a superior user experience.

Final Thoughts!

Crafting a responsive React application requires meticulous management of window dimensions and screen sizes. By creating a custom hook, developers can efficiently track and respond to window resizing events, ensuring that components render optimally across all devices. This approach not only simplifies state management but also enhances the overall performance and user experience of React apps.

// ExampleComponent.js
import React from 'react';
import useWindowSize from './useWindowSize';

const ExampleComponent = () => {
  const { width, height } = useWindowSize();

  return (
    <div>
      <h1>Current Window Size</h1>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
      {width > 768 ? <DesktopView /> : <MobileView />}
    </div>
  );
};

export default ExampleComponent;

// useWindowSize.js
import { useState, useEffect, useCallback } from 'react';

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

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

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

  return windowSize;
};

export default useWindowSize;

// useWindowSize.test.js
import { renderHook, act } from '@testing-library/react-hooks';
import useWindowSize from './useWindowSize';

test('should return initial window size', () => {
  const { result } = renderHook(() => useWindowSize());
  expect(result.current.width).toBe(window.innerWidth);
  expect(result.current.height).toBe(window.innerHeight);
});

test('should update window size on resize', () => {
  const { result } = renderHook(() => useWindowSize());

  act(() => {
    window.innerWidth = 500;
    window.innerHeight = 500;
    window.dispatchEvent(new Event('resize'));
  });

  expect(result.current.width).toBe(500);
  expect(result.current.height).toBe(500);
});

// useWindowSize.js with debounce
import { useState, useEffect, useCallback } from 'react';
import debounce from 'lodash.debounce';

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

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

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

  return windowSize;
};

export default useWindowSize;

// useEnhancedWindowSize.js
import { useState, useEffect, useCallback } from 'react';
import debounce from 'lodash.debounce';

const useEnhancedWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
    scrollY: window.scrollY,
  });

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

  const handleScroll = useCallback(
    debounce(() => {
      setWindowSize((prev) => ({
        ...prev,
        scrollY: window.scrollY,
      }));
    }, 100),
    []
  );

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

  return windowSize;
};

export default useEnhancedWindowSize;