How to Re-render Browser View on Window Resize in React JS

React re-render component on browser resize example. This post will teach you how to re-render the component or browser view when the window is resized in React JS.

To give you the demo about React re-render component on browser resize. We will create a simple div and update its dimensions as you resize the browser window.

The component will dynamically calculate its height and width and update its properties on the browser.

In general, components are responsible for setting up the view in React.

Rendering is a process concerned with manifesting the output on the browser.

React JS Re-render Component on Browser Resize Example

• Step 1: Set Up React Project
• Step 2: Configure Bootstrap Module
• Step 3: Create New Component
• Step 4: Re-render UI on Browser Resize
• Step 5: Update App Component
• Step 6: View App on Browser

Set Up React Project

To set up a new project, you must have a suitable (Node and Npm) environment set up for React.

Head towards the console, type the command and hit enter.

npx create-react-app react-blog

After the app is downloaded, move into the project folder.

cd react-blog

Configure Bootstrap Module

In this section, you will be installing Bootstrap using the given command.

npm install bootstrap --legacy-peer-deps

After the module is installed, make sure to add bootstrap.min.css in App.js component.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Create New Component

Next, create the components/ folder inside the src folder, and create the Users.js file with given code to form the function component.

import React from 'react'
function Users() {
  return (
    <div>Users page</div>
  )
}
export default Users

Re-render UI on Browser Resize

Set the variables to invoke the initial state using the useState hook. Create the function which updates the block width and height on window resize.

The useEffect hook updates the React UI on every render or re-render.

Add the following code into the components/Users.js file.

import React from "react";
function Users () {
  const [size, initSize] = React.useState();
  const onResize = () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    initSize({
      width: width,
      height: height,
    });
  };
  React.useEffect(() => {
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);
  return (
    <div
      style={{
        ...styles.container,
        backgroundColor:
          !size || size.width <= 655
            ? "grey"
            : size && size.width <= 1024
            ? "orange"
            : "black",
      }}
    >
      {size && (
        <>
          <h2>Width: {size.width}</h2>
          <h2>Height: {size.height}</h2>
        </>
      )}
      {!size && <strong>Resize browser to invoke re-rendring</strong>}
    </div>
  );
};
const styles = {
  container: {
    width: "100%",
    height: "100vh",
    display: "flex",
  },
};
export default Users;

Update App Component

Open the App.js component, then add the following code into the file.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Users from "./components/Users";
function App() {
  return (
    <div className="container mt-4">
      <h2 className="mb-3">
        React JS Component Re-render On Browser Resize Example
      </h2>
      <Users />
    </div>
  );
}
export default App;

View App on Browser

Ultimately reached to the final part of this guide, now we will start the application and check it on the browser.

npm start

Conclusion

Re-rendering simply means when any change occurs in the component resulting in updating the React UI.

We used the React hooks useEffect and useState in a function component to re-render the dom elements on browser resize in our React JS guide.