Пользовательский Dimensions HOOK для ваших проектов React.

Работая над одним проектом, мне нужно было убедиться, что он полностью адаптирован к мобильным устройствам без каких-либо проблем, и поскольку я хотел взять на себя 100% ответственности за процессы приложения, мне нужно было отслеживать определенные изменения во времени, поскольку это было ключевым для приложения.

Я нашел в Интернете несколько решений, большинство из которых имели свои недостатки, и я не был слишком впечатлен, поэтому я решил, что лучше всего будет вырезать свое. Ниже приведены мои фрагменты кода, которые сделали волшебство, которое привело меня к созданию пользовательского хука. Мне понравилась идея хуков (useState, useRef, useReducer, useContext++)… простота в реализации привела меня к использованию их возможностей наилучшим образом.

Поэтому я постарался максимально упростить свое решение, чтобы его можно было повторить для решения других задач.

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;
}

*Как это использовать. в пользовательском компоненте ‘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

Надеюсь, это было действительно полезно…
дайте мне знать, что вы думаете, ребята.