useMemo

• 메모이제이션된 값을 반환한다.

  메모이제이션(memoization) : 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
  출처) 위키백과 - 메모이제이션

컴포넌트가 재 렌더링이 될 때마다 굳이 값이 변경되지 않았는데도 불필요한 연산을 해야하는 경우가 생긴다.
이럴 때 useMemo를 사용하면 이미 연산한 값을 저장해놓고, 렌더링이 일어날 때 의존성이 변경되지 않았다면 저장해둔 값을 사용해서 불필요한 계산을 방지할 수 있다.

사용방법

import React, { useMemo } from  "react";

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

• 의존성 배열에 담긴 값이 변경이 되었을 때에만 저장된 값을 다시 계산한다.
• 불필요한 렌더링이 줄어든다.
• 배열이 없는 경우 매 렌더링마다 새 값을 계산한다.

side effects(사이드 이펙트)는 useEffect로 처리해야 한다.
(side effects : 함수의 결과값 이외의 상태를 변경시키는 행위)
그리고 언제나 반드시 필요한 경우에만 사용하자.

출처)
공식문서 - Hook API 참고서(useMemo)
React Hooks: useMemo 사용법(DaleSeo블로그)