Write a Custom React Hook that Returns the Browser's Width and Height

Mahmoud Abdelwahab: [0:00] Here we have a React app running, and we're displaying data about the size of the browser window, specifically the inner width and the inner height.

[0:08] We're using a custom React hook called useWindowSize that returns an object containing this information, and we're storing it in a variable called windowSize. To display the width and height we access the object's innerWidth and innerHeight properties. As you can see the values are dynamic and change as we resize the browser window.

[0:32] Let's take a look at how we can build this React hook. We're starting off with an empty JavaScript file called useWindowSize.js. The first thing we'll do is import { useState } from "react". Then we'll create a function called getSize() that will return an object containing the window's innerHeight and innerWidth.

[1:02] Then we'll define a function called useWindowSize(), and inside it, we'll use the useState hook to hold the state of the browser. We do that by defining a variable to hold the state called windowSize, and then we'll define a setter function for updating that state and we'll call it setWindowSize, and we'll retrieve the initial value of our state by calling the getSize function.

[1:24] To listen to the resize event, we'll first need to import the useEffect hook from React. We'll attach an EventListener to the window object listening for the resize event, and trigger a function called handleResize().

[1:44] This function will be called every time the browser's window is resized. Is responsible for setting the state of our hook by calling the setWindowSize function and passing the getSize function to it.

[1:58] Then inside of our useEffect, we'll return a function that removes the EventListener. Since we want this effect to only run when the component mounts, we'll pass an empty array to useEffect, then we'll return windowSize. This is the object that will be returned when we call this hook.

[2:19] To recap, we first imported { useState } from "react". This is to keep track of the state of the browser. We defined a variable called windowSize, and set a function called setWindowSize, and the default value for our state is the getSize function. This is a function that returns the window's innerHeight and innerWidth.

[2:38] Since we want to listen to the resize event, we first imported useEffect and inside useEffect we add an event listener for the resize event, and then every time this event happens, we call handleResize. This function calls the setWindowSize function and then gets the window's inner height and inner width by calling the getSize function that we defined above.

[3:03] Finally, we just remove the event listener and pass an empty array since we want this effect to run once the component mounts. Then, we return windowSize, and this is the value that we return every time we call the useWindowSize hook.

[3:20] Now, we have a custom React hook that returns the window's inner height and inner width.