React - useMemo,useCallback

useMemo

• useMemo는 useRef과 유사하게 작동하지만 useRef는 값을 기억한다면 useMemo는 함수의 리턴값을 기억(캐싱)한다.

• hooks의 경우 state에 변화가 발생하면 함수 전체가 다시 실행되기 때문에 예를 들어 state에 funcA()라는 함수를 할당한 경우, state에 변화가 생길 때마다 funcA()에는 변화가 없음에도 계속해서 다시 실행되게 된다.
  

• 성능 최적화를 위해 useMemo를 이용하여 함수의 리턴값을 캐싱해놓는 효율적인 코드를 작성하는 것이 좋다.

code
const random = useMemo(() => randomNumber(), []); // 함수, deps array
// 두 번째 인자가 바뀌지 않는 이상 다시 실행되지 않음. 두 번째 인자의 값이 바뀌면 다시 실행됨.

useCallback

• useCallback은 함수 자체를 기억하는 API이다.
• 구현되는데 시간이 걸리는 함수들은 useCallback을 통해 함수를 기억(캐싱)하게 해놓고 렌더링이 될 때마다 다시 실행되지 않게 설정해야 한다.
• useCallback 안에서 state를 조작하는 경우 항상 input(두번째 인자, 배열)에도 추가해줘야함
• useCallback은 자식컴포넌트에 프롭스로 함수를 넘기는 경우 꼭 사용해줘야 한다. 부모 컴포넌트의 값이 계속 바뀌는 것으로 인식해서 값이 바뀌지 않아도 재렌더링이 된다.

const funcA = useCallback(() => {
  console.log('구현이 복잡한 함수');
}, [parameter]);