React Get Dynamic Window Height Width using React Hooks

React Js get window height width on window resize tutorial; In this tutorial, we will help you find out how to use React useState and useEffect hooks to detect the dynamic window width and height on window resize.

React hooks are fantastic, they help you use state and other essential react features in react functional components. Before we move forward, let’s understand what useState and useEffect hooks are.

useEffect: This hook orders React to take action after the component renders. It takes an array as a value; the value passed to the useEffect array will tell the useEffect hook to invoke only the change occurred in the passed array property. Otherwise, If you leave it empty, it will look for the change in the entire component.

On the other hand, useEffect offers a cleanup function; it works asynchronously and runs the cleanup function before performing a new effect. It unsubscribes the functions, values and boosts the component performance by preventing the memory leak.

useState: This hook helps you define the state variable in functional components. You set the initial state to this function, and it returns the variable with current state similarly the other function updates this value.

How to Use React Hooks to Detect Window Size in React Js

  • Step 1: Create React Project
  • Step 2: Create Component File
  • Step 3: Get Dynamic Screen Dimension on Resize
  • Step 4: Update App Js File
  • Step 5: Start React App

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 = () => {
      dynamicWidth: window.innerWidth,
      dynamicHeight: window.innerHeight
  useEffect(() => {
    window.addEventListener('resize', setDimension);
    return(() => {
        window.removeEventListener('resize', setDimension);
  }, [screenSize])

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

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.



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.


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

1 day ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

4 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

1 week ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago