useMemo -React Hooks

Hooks API Reference – React

useMemo는 메모리 최적화를 위한 Hook API입니다.

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

• useMemo()에 콜백함수를 사용하며 retrun 값을 넘겨준다. return 값에는 객체도 넘겨줄 수 있다.
• useMemo()의 두 번째 인자로는 의존성 배열을 표기한다. (의존성 배열의 값이 바뀔 때만 콜백을 호출한다.)

 

useMemo는 성능 최적화를 위해 사용할 수 있지만 의미상으로 보장이 있고 생각하지는 말아야 한다.

즉 API를 사용한다고 해서 최적화가 되는 것이 아니라 코드의 상황에 따라 사용해야 최적화에 적합하다는 말이다.

 

주의사항

원시 (Primitive) 타입과 객체(Object) 타입의 특성을 고려해서 사용해야 합니다.

• 객체타입은 값이 들어있는 메모리의 주소를 가지고 있고, 초기화할 때마다 메모리의 주소가 달라지는 현상
• useEffect()를 사용할 때에는 원시 타입과 객체타입의 특성을 고려해서 사용해야 합니다.