Post
Ask Question

How to re-render the View When the Browser is Resized in ReactJS

To re-render a React component when the browser is resized, you can use the window resize event. The typical approach involves adding an event listener for the resize event and updating the component's state accordingly.

Here’s a step-by-step guide to achieve this.

Step 1. Create a custom Hook for window resize

Creating a custom hook for handling window resize events is a clean and reusable way to implement this functionality.

import { useState, useEffect } from 'react';

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

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

    window.addEventListener('resize', handleResize);

    // Clean up the event listener on component unmount
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
};

export default useWindowSize;

Step 2. Use the custom hook in your component

You can now use this custom hook in any component to get the current window size and trigger a re-render on resize.

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

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

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
      {/* Your component rendering logic */}
    </div>
  );
};

export default ResizableComponent;

Explanation

  1. Custom Hook (useWindowSize)

    • Initializes state with the current window dimensions.
    • Sets up an effect that adds an event listener for the resize event.
    • Updates the state with the new dimensions whenever the window is resized.
    • Cleans up the event listener when the component is unmounted to prevent memory leaks.

  2. Using the Hook

    • The custom hook useWindowSize is imported and used in the ResizableComponent.
    • The hook provides the current window dimensions, which are used to re-render the components whenever they change.

Benefits of using a custom hook

  • Reusability: The custom hook can be reused across multiple components.
  • Separation of Concerns: Keeps the resize logic separate from the component logic, making the component cleaner and easier to maintain.

Full Example

Combining both the custom hook and the component, here’s a full example:

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

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

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

    window.addEventListener('resize', handleResize);

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

  return windowSize;
};

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

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
      {/* Your component rendering logic */}
    </div>
  );
};

export default ResizableComponent;

By using the custom hook useWindowSize, your component will re-render whenever the browser window is resized, ensuring that any dependent UI elements are updated accordingly.


Similar Articles