Memoization

• Memoization는 본질적으로 캐싱이라 할 수 있습니다.
• Memoization은 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장한다

const cache = {}

function slow(a) {
  if (cache[a]) return cache[a]
  
  const result = /* Complex logic */
  cache[a] = result
  return result
}

캐시에 정보가 있다면 복잡한 함수를 실행하지 않고 캐시에서 정보를 가져다 사용 할 수 있습니다.

리액트의 메모이제이션

• 리액트의 메모이제이션에서 주목해야할 부분은 바로 이전의 값만 메모이제이션 한다는 것!

const Memoized = React.memo(Component)

<!-- 새롭게 렌더링 -->
<Memoized num="{1}" />
<!-- 직전 elements를 사용 -->
<Memoized num="{1}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{2}" />
<!-- 새롭게 렌더링 -->
<Memoized num="{1}" />

리액트의 메모이제이션 종류

1. React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* props를 사용하여 렌더링 */
});

React.memo는 고차 컴포넌트(Higher Order Component)입니다.

React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑하여 경우,
컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다.

2. useMemo

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

이 코드는 computeExpensiveValue(a, b)를 호출합니다. 그러나 종속성 [a, b]가 마지막 값 이후로 변경되지 않은 경우 useMemo는 두 번째 호출을 건너뛰고 반환된 마지막 값을 재사용합니다.

3. useCallback

const handleReset = useCallback(() => {
  return doSomething(a, b)
}, [a, b])

useMemo가 종속성 배열을 기반으로 값을 캐시한다면 useCallback은 값을 캐시하는 대신 함수를 캐시하는 데 사용됩니다.

useMemo & useCallback의 차이

useMemo 와 useCallback의 주요 차이점 useMemo는 종속성이 변경될 때 마다 전달된 함수를 호출하고 해당 함수 호출의 값을 반환하는데 반해 useCallback은 전달 된 함수를 호출하지 않고 종속성이 변경 될 때마다 전달 된 함수의 새 버전을 반환합니다.

useCallback(() => {
  return a + b
}, [a, b])

useMemo(() => {
  return () => a + b
}, [a, b])

위와 같이 useCallback은 전달 된 함수를 반환하고, useMemo는 결과를 반환합니다.

Reference

https://ko.reactjs.org/docs/react-api.html#reactmemo