React useMemo()

Return Memoized Value

Reuse computed values with the useMemo Hook for performance optimization. It calls a specific function only when given values change, not on every render.

Efficient when values change frequently but calculations are expensive and only need to be updated when specific options change.

React Hooks: useMemo 사용법

React Hooks 중 하나인 useMemo 함수를 왜/언제/어떻게 써야하는지 알아보겠습니다. useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚고 넘어가겠습니다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.

https://www.daleseo.com/react-hooks-use-memo/

이제는 사용해보자 useMemo & useCallback

이제 useState와 useEffect에 완전히 익숙해졌다고 느꼈는데, 컴포넌트 내에서 저 두 개의 hook 만으로도 props나 state를 다루는 로직에 관련된 기본적인 기능을 모두 구현할 수 있기 때문에 굳이 useMemo나 useCallback 을 사용할 필요를 느끼지 못했다. 물론 useMemo와 useCallback 은 리액트의 렌더링 성능 최적화를 위한 hook 이기 때문에 필수적으로 사용할 필요는 없다.

https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html

React useMemo()

Return Memoized Value

Backlinks

Recommendations