TIL #23 | useCallback & useMemo

useCallback

함수는 객체이므로 새로운 값을 넣어주게 되면 새로운 주소값을 갖게 되어 함수를 호출하는 컴포넌트가 리렌더링 된다.

  // 함수가 렌더링 될 때 새로운 주소값을 갖게 됨 -> 렌더링 -> useCallback 사용

// as-is
const initCount = () => {
setCount(0);
};

이런 문제점을 해결하기 위해 useCallback 사용

// to-be
const initCount = useCallback(() => {
setCount(0);
}, []);

새롭게 갱신되지 않고 메모리제이션 된 상태로 남아있게 된다.
-> 최초의 주소값으로 유지 -> 스냅샷

---

useMemo

  const heavyWork = () => {
    for (let i = 0; i < 100000000; i++) {}
    return 100;
  };

  const value = useMemo(() => heavyWork(), []);
  console.log(`value는 ${value} 입니다.`);

-> 메모리에 저장되기 때문에 반드시 필요할 때만 사용!

=

React Hooks 최적화

React.memo

자식 컴포넌트가 바뀐게 없음에도 부모 컴포넌트 변경 시 같이 리렌더링이 된다.
이와 같은 상황에 React.memo를 사용할 수 있다.