useMemo 를 언제 써야할까

useMemo란 불필요한 계산을 스킵할수 있도록 해주는 훅.

물론 맨 처음 렌더링도 스킵하는건 아니고 그 이후부터 계산에 변화가 없다면 스킵가능하다.

const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);

만약 배열에 안에 있는 todos 와 filter 가 변하지 않았다면 getFilteredTodos 함수는 실행되지 않는다.

useMemo를 사용하는 이유는 내 생각엔 앱 효율성을 위해 불필요한 계산은 건너뛰기 위함이다.
매번 같은 계산을 렌더링될 때마다 할필요는 없으니까
그렇다면 앱 효율성에 영향을 끼칠만한 불필요한 계산은 어느정도 크기(?) 여야 불필요한 것일까

리액트 문서를 참조하였음.

수천개의 객체를 만들거나 수천번의 루프를 돌지 않는 이상 불필요한 계산이 아닐 것이다 라고 한다.

더 정확한 방법은

시간소요를 체크해보면 된다고 한다.

console.time('filter array');
const visibleTodos = getFilteredTodos(todos, filter);
console.timeEnd('filter array');

You will then see logs like filter array: 0.15ms in your console. If the overall logged time adds up to a significant amount (say, 1ms or more), it might make sense to memoize that calculation

참조
https://react.dev/learn/you-might-not-need-an-effect