React Re-render View on Browser Resize Example Tutorial

In React, a component re-renders when the state or props change in a component. Sometimes, peculiar requirements may arise where we have to re-render the component on window Resize in React.

In this tutorial, you will learn how to re-render browser view on window resize in React js. To update the React UI on browser resize, we will use the React functional component along with React useState and useEffect hooks.

How to Re-render React Component on Window Resize

  • Step 1: Download React Project
  • Step 2: Make Component File
  • Step 3: Install Bootstrap Library
  • Step 4: Re-render View on Browser Resize
  • Step 5: Update App Js File
  • Step 6: Start React Server

Download React Project

Go to terminal of your code-editor; Type the following command n the console, then hit enter to create a new React application.

npx create-react-app react_demo

Step inside the React app directory.

cd react_demo

Make Component File

Now, look for src directory of your React project.

Inside the folder, make the components folder, then create the Home.js file, within this file put the given code to form the functional component.

import React from 'react'

function Home() {
  return (
    <div></div>
  )
}

export default Home

Install Bootstrap Library

Bootstrap is library that helps us design the UI components and UI layout in very less time. You can install the bootstrap package in React using given command.

npm install bootstrap

Head over to App.js file; import the bootstrap CSS path as suggested below.

import React from "react";
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="container mt-5">
      
    </div>
  );
}

export default App;

Re-render View on Browser Resize

Now, you need to open the components/Home.js file, and make sure to insert the following code within the file.

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

const Home = () => {
  const [elSize, setElSize] = useState();

  const onWinResize = () => {
    const width = window.innerWidth;
    const height = window.innerHeight;

    setElSize({
      width: width,
      height: height,
    });
  };

  useEffect(() => {
    window.addEventListener("resize", onWinResize);

    return () => {
      window.removeEventListener("resize", onWinResize);
    };
  }, []);

  return (
    <div
      style={{
        ...styles.container,
        backgroundColor:
          !elSize || elSize.width <= 555
            ? "white"
            : elSize && elSize.width <= 769
            ? "purple"
            : "yellow",
      }}
    >
      {elSize && (
        <>
          <h2>Width: {elSize.width}</h2>
          <h2>Height: {elSize.height}</h2>
        </>
      )}

      {!elSize && <h2>Resize window to Re-render Component</h2>}
    </div>
  );
};

const styles = {
  container: {
    width: "100%",
    height: "100vh",
    display: "flex",
  },
};

export default Home;

Update App Js File

Go to src/App.js file, here in this file, we need to import the Home component. It will register the Home component inside the React global component.

import React from "react";
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Home from "./components/Home";

function App() {
  return (
    <div className="container mt-5">
      <h2>React Re-render Component on Window Resize Example</h2>
      <Home />
    </div>
  );
}

export default App;

Start React Server

In the final step, we have to run the given command. It will run the React development server.

npm start

Above provide print certain URLs on the console screen use either of the URL to view the app.

http://localhost:3000

React Re-render View on Browser Resize Tutorial

Conclusion

A tiny update in the state can bring change to the user interface elements to be re-rendered automatically.

In this guide, we have explored how to re-render view on browser resize in React application. We learned how to listen to window resize to activate the component re-rendering in React.