How to Calculate Screen Size on Browser Resize with React Hooks

Last Updated on by in React JS

Calculating the window dimensions dynamically is an essential programming task for every front-end developer, beneficial in creating responsive and user-friendly web applications. The ability to adapt to varying screen sizes and resolutions is crucial in today’s multi-device ecosystem.

In this tutorial, we will help you learn how to calculate the window dimensions (width and height) on a window or browser resize in the React application using React hooks.

We will show you how to efficiently get dynamic dimensions in React by harnessing the true power of React hooks (useState, useEffect). React developers can use these hooks in function components to get height and width in real-time based on the browser screen size.

React Calculate Screen Size on Browser Size

If you rather want to see a video tutorial:

If you liked the tutorial, then don’t forget to subscribe

Create React Project

Let us create the react application using the create-react-app cli tool. You may jump on to the subsequent step if already installed the app.

npx create-react-app react-blog

After the app is created, get into the app.

cd react-blog

Create Component File

Next, create a UserWindow.js file, then copy and paste the provided code into the file.

import React, { Component } from "react";

class UserWindow extends Component {
  render() {
    return (
      <> </>
    );
  }
}

export default UserWindow;

Get Dynamic Screen Dimension on Resize

Import React, and useState, useEffect hooks from the ‘react’ package into the functional component. To set the initial state, use the useState hook.

The useEffect hook is here to call the setDimension function when the component renders; in our case, it will re-render when the user resizes the screen size.

In this step, you have to open the components/UserWindow.js file and insert the given below code.

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


export default function UserWindow() {

  const [screenSize, getDimension] = useState({
    dynamicWidth: window.innerWidth,
    dynamicHeight: window.innerHeight
  });

  const setDimension = () => {
    getDimension({
      dynamicWidth: window.innerWidth,
      dynamicHeight: window.innerHeight
    })
  }
  
  useEffect(() => {
    window.addEventListener('resize', setDimension);
    
    return(() => {
        window.removeEventListener('resize', setDimension);
    })
  }, [screenSize])

  return (
    <div>
      <ul>
        <li>Width: <strong>{screenSize.dynamicWidth}</strong></li>
        <li>Height: <strong>{screenSize.dynamicHeight}</strong></li>
      </ul>    
    </div>
  )
}

Update App Js File

Now, we can add the UserWindow component in the app js file. Open the src/App.js file and insert the given code code into the file.

import React from "react";
import UserWindow from "./components/UserWindow"


export default function App() {
  return (
    <UserWindow />
  );
}

Start React App

You can execute the following command to start the react app.

npm start

This url will help you open the app.

http://localhost:3000

React Get Dynamic Window Height Width using React Hooks

Conclusion

In this tutorial, we discussed how you could take action when the component renders or re-renders.

We used the concept of React hooks to find out the dynamic window height and width.

Particularly, we used the useState to set the initial height and width of the window.

Also, used the useEffect hook to update the value when found the change in the screen size variable.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.