정말 리액트에서 useMemo를 사용해야 할까요? 알아봅시다.

원문: https://medium.com/swlh/should-you-use-usememo-in-react-a-benchmarked-analysis-159faf6609b7

useMemo 란?

리액트에서는 useMemo에 대해 뭐라고 하나요?

성능 최적화를 위해 useMemo를 사용할 수 있습니다.

가설

벤치마크 셋업

import React from 'react';
const BenchmarkNormal = ({level}) => {
    const complexObject = {
        values: []
    };
    for (let i = 0; i <= level; i++) {
        complexObject.values.push({ 'mytest' });
    }
    return ( <div>Benchmark level: {level}</div>);
};
export default BenchmarkNormal;

import React, {useMemo} from 'react';
const BenchmarkMemo = ({level}) => {
    const complexObject = useMemo(() => {
        const result = {
            values: []
        };

        for (let i = 0; i <= level; i++) {
            result.values.push({'mytest'});
        };
        return result;
    }, [level]);
    return (<div>Benchmark with memo level: {level}</div>);
};
export default BenchmarkMemo;

function App() {
  const [showBenchmarkNormal, setShowBenchmarkNormal] = useState(false);
  // 이 컴포넌트를 렌더링 하는 횟수를 지정하며
  // 그리고 이런 모든 렌더링에 대한 평균 렌더링 시간을 계산합니다.
  const timesToRender = 10000;
  // profiler 콜백
  const renderProfiler = (type) => {
    return (...args) => {
      // 렌더링 시간을 배열로 유지합니다.
      // 나중에 평균 시간을 계산합니다.
      // 렌더링 시간인 args[3]을 저장합니다.
    };
  };
  // 컴포넌트를 렌더링합니다.
  return (
    <p>
      {showBenchmarkNormal &&
        [...Array(timesToRender)].map((index) => {
          return (
            <Profiler
              id={`normal-${index}`}
              onRender={renderProfiler("normal")}
            >
              <BenchmarkNormal level={1} />
            </Profiler>
          );
        })}
    </p>
  );
}

// state에 간단한 카운터를 추가합니다.
// 이는 리렌더링을 발생하기 위해 사용됩니다.
const [count, setCount] = useState(0);
const triggerReRender = () => {
  setCount(count + 1);
};
// 추가적인 prop를 가지도록 벤치마크 컴포넌트를 업데이트 합니다.
// 강제로 리렌더링 됩니다.
<BenchmarkNormal level={1} count={count} />;

결과

복잡도 n = 1 결과

복잡도 n = 100 결과

복잡도 n = 1000 결과

복잡도 n = 5000 결과

결과에 대한 참고 사항

결론

핵심

• useMemo는 처리량이 많을 때 사용해야 합니다.
• 추가 처리를 피하려고 useMemo를 사용하는 것이 흥미로워지는 임곗값은 애플리케이션에 따라 크게 달라집니다.
• 처리량이 매우 적은 경우 useMemo를 사용하면 추가 오버헤드가 발생할 수 있습니다.