useMemo

useMemo

const cachedValue = useMemo(calculateValue, dependencies)

useMemo는 계산 결과를 캐시할 수 있는 React Hook이다.

매개변수

• calculateValue: 캐시하려는 값을 계산하는 함수. 인수를 사용하지 않아야 하며 모든 유형의 값을 반환해야 한다.
• dependencies: 코드 내부에서 참조되는 모든 반응 값 목록이다.

용법

비용이 많이 드는 계산 건너뛰기

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

종속성이 변경되지 않은 경우 useMemo 이전에 이미 계산한 값을 반환한다. 그렇지 않으면 React가 계산을 다시 실행하고 새 값을 반환한다.

useMemo가 유용한 경우

• useMemo에 입력하는 계산이 눈에 띄게 느리고 종속성이 거의 변경되지 않는경우
• 값이 바뀌지 않았을 때 리 렌더링을 원하지 않는 경우
• 전달하는 값이 나중에 일부 Hook의 종속성으로 사용되는 경우

컴포넌트 리렌더링 건너뛰기

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
  );
  return (
    <div className={theme}>
      {/* ...List will receive the same props and can skip re-rendering */}
      <List items={visibleTodos} />
    </div>
  );
}

다른 Hook의 종속성 메모하기

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ Only changes when text changes

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes
  // ...