useMemo
에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
const 저장할변수 = useMemo(()=> {
return 계산하는_무거운함수()
}, [감시하고_있는_변수])
- 코드 설명
- 문제점(콘솔을 살펴보자)
const count = useMemo(() => {
return countActiveUsers(users);
}, [users]);
useMemo(실행될 것, [값])
라고 할 때 useMemo는 렌더링 전에 실행되어 메모이제이션한 것을 반환한다. 값이 바뀌었는지 확인하고 렌더링 전에 저장된 것을 보내준다.useEffect
는 렌더링 후에 상태가 업데이트 되었을 때를 감지하여 동작한다.비동기적으로 fetch를 할 때 useEffect를 쓰는데 useMemo를 쓰면 안되나라는 의문이 들었다. useMemo를 쓰면 안되는 이유를 찾아봤는데 해당링크에서 답을 찾을 수 있다.
For more additional info, you should NOT resolve async action in useMemo since you will block the thread (and JS is single-threaded). Meaning, you will wait until the promise will be resolved, and then it will continue with computing the component.