while working on a certain project, i needed to ensure that it was fully adapted to mobile, without any issue, and since i wanted to take 100% ownership of the application processes, i needed to in-my-own-way track certain changes per time, since this was key to the application.

I found several solutions online, most of which had its downside and i wasn't too impressed, so i decided it would be best to carve mine. Below is my code snippets that did the magic, which led me to building a custom-hook, i like the idea of Hooks(useState, useRef, useReducer, useContext++).. the simplicity in its implementation led me to utilizing its power in my best ability.

So, i went ahead to break my solution down as simple as possible in such a way as can be replicated to do solve other problems.

useWindowDimensions.jsx

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

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}

*How you use it. in a custom component 'MyComponent' *

import React from 'react';
import useWindowDimensions from './hooks/useWindowDimensions';

const MyComponent = () => {
  ...... 
    const { width:w, height:h} = useWindowDimensions();
  ...... 
 return (
       <>
            <AnotherComponent width={w} height={h} />
       </>
  );
}

export default MyComponent

i hope this was really helpful..
let me know what you guys think.