React memoization

1. React.memo()

• component를 메모
• 자체적으로 props값을 비교해서 변경이 없다면 DOM비교작업을 하지 않는다.
• 대신 변경되는 props를 받는다면 memo소용이 없다.

// 방법 1
const solution = React.memo(() => {
  return ()
})

// 방법 2
export default React.memo(solution)

2. useCallback()

• 함수를 메모
• React는 얕은 비교를 해서 원시타입은 판단 가능하지만, 참조 타입은 렌더가 될때마다 참조 메모리 주소가 달라진다.
  => 다른 값으로 인지하고 렌더가 일어난다.
  => JS에선 함수가 객체로 취급(참조형)되므로 렌더링이 될때마다 새로운 함수 생성.
• deps에 들어있는 값이 변경되지 않는다면 이전의 참조 값을 반환.

const useCallbackFunc = useCallback(() => {
  solution(a, b);
}, [a, b]);

3. useMemo()

• 함수의 반환 값을 메모.
• deps에 들어있는 값이 변경이 안되었다면 메모 된 값(이전에 계산한 값)을 사용.

const useMemoFunc = useMemo(() => solution(a, b), [a, b]);

---

- 재렌더링을 막기위해 무분별하게 사용하면 안된다.

- 리렌더링이 자주 일어나지 않는다면 굳이 사용할 필요 없다.(메모리에 불필요하게 남아있을 필요는 없다.)

 

👍 참고 블로그)

https://www.howdy-mj.me/react/memoization