useWindowResize 컴포넌트 리렌더링 문제

[Bhanjo]

import { useEffect, useState } from 'react';

const useWindowReszie = () => {
  const [windowSize, setWindowSize] = useState({ width: null, height: null });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    handleResize();

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

  return [windowSize, setWindowSize];
};

export default useWindowReszie;

[설명]
useWindowResize는 브라우저 창 사이즈가 변경될 때 width, height 값을 계산해 리턴하는 custom hook입니다.
하지만, 이 로직에서는 단 1px이라도 변하면 setState로 값이 변하게 되며 이로인해 useWindowResize를 사용하는 컴포넌트의 리렌더링이 발생합니다.

[문제점]

• 너무 잦은 렌더링으로 인한 성능저하
• SvgComponent와 동시에 사용 시 1px이라도 변화가 발생하면 리렌더가 발생하며 Suspense-Fallback으로 인해 화면이 깜빡거리는 현상 발생

[개선 방안]

• lodash 사용 고려