useMemo 에 대한 정리

PS.
간만에 시간이 나서 계속 눈으로만 보던 정보들을 정리

[영어 원문](https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70?gi=5f63e57e7141)
[읽은 글 링크](https://velog.io/@lky5697/stop-using-usememo-now?utm_source=substack&utm_medium=email)

`useMemo`를 이용하면서 나도 무분별하게 사용을 했던 일들이 많았다.
특히나 문제가 있었던 이유가 랜더링이나 연산이냐를 두고 혼자 고민을 해서 `내 기준`으로 사용을 했던 것 같다.

근데 요새 많은 기술 블로그에서 나오는 글들을 공장에서 눈으로만 읽었는데, 추후에 또 분명!! 읽을 것 같아서 대략 요약만 남긴다.


#### `useMemo` 란
컴포넌트 리랜더링 간에 결과를 캐싱할 수 있는 훅.
성능상의 이유로만 사용되며, React.memo, useCallback, debouncing, 동시랜더링 등과 같은 기술과 함께 사용해야함.

**대부분의 개발자가 부적절하게 사용하고 있음.**
변수처럼 막 사용하기에 무분별하게 `useMemo`를 사용하는 것을 볼 수 있음.

`useMemo`는 렌더링 단계에서만 값을 제공.
초기화하는 동안 메모제이션은 애플리케이션의 속도를 늦추고 메모리에 지속적으로 쌓임.

### 올바른 `useMemo`를 위한 간단한 정리

1. 큰 연산이 없으면 사용하지 말 것
2. props를 감지해야 되는  경우 `memo`를 사용하는게 더 나아보임.
3. 만약 고비용, 고연산인지 모르겠담면 확인을 해야된다면 `performance.now()` 사용
4. props로 전달되더라도 배열, 객체가 자주 변경되는 경우 useMemo는 항상 재계산되므로 성능적인 효과가 전혀 없음 또한 캐시에도 쌓일 필요 없는데  쌓임.

결국 `useMemo`는 물론 필요는 하지만 "정말 필요한가?"를 생각해야 한다.


간만에 블로그에 글을 적는 것 같다.
오랜만이라 기분이 좋군.