간단한 연산에 useMemo 쓰지 말자

Aug 26, 2021

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

공식 설명에도 computeExpensiveValue라고 설명하고 있다. 즉 비싼 연산을 언급하는 것이다. 예를 들면 데이터 만개를 변경한다던가…

const isSame = useMemo(() => a === b, [a, b]);

a === b는 전혀 비싼 연산이 아니다! 이 경우, 메모하는 메모리 비용에다가 [a, b]로 들어간 디펜던시에서 리액트의 디펜던시 비교연산인 objectis를 수행하는 연산이 훨씬 더 비용이 많이 들 것이다.

const isSame = useMemo(() => a === b, [a, b]);
const isEqual = a === b;

useEffect(() => {
  //
}, [isSame]);

useEffect(() => {
  //
}, [isEqual]);

훅 디펜던시는 자바스크립트 원시값(Primitive)을 비교하기 때문에 useMemo로 메모이제이션을 하지 않아도 영향을 주지 않는다. (isSame, isEqual이 object, array가 아니기 때문임을 주의!)

그렇다면 비싼 연산인지 아닌지는 어떻게 판단할 수 있을까? 이는 해당 컴포넌트의 렌더링이 자주 일어나는지, 연산이 복잡한지에 따라 달라지기 때문에 확답할 수 없다. 개발자도구를 적극적으로 활용하자.

참고