이른바 useCalleback

메모에 대한 콜백을 반환합니다.

이른바 useMemo

설명 값을 반환합니다.
알 것 같아서 행동을 확인하는 코드를 썼어요.

코드

import * as React from "react";
import { useCallback, useMemo, useState } from "react";

let tmpHandleClick: () => void;
let tmpHandleClick2: () => void;

export const Component: React.FC = () => {
  const [count, setCount] = useState(0);
  const double = useMemo(() => {
    console.log("double が計算された。");
    return count * 2;
  }, [count]);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);
  if (tmpHandleClick !== handleClick) {
    console.log("handleClick が生成された。");
  }
  tmpHandleClick = handleClick;

  // ----------------------

  const [count2, setCount2] = useState(0);
  const dobule2Func = (i: number) => {
    console.log("double2 が計算された。");
    return i * 2;
  };
  const double2 = dobule2Func(count2);

  const handleClick2 = () => {
    setCount2(count2 + 1);
  };
  if (tmpHandleClick2 !== handleClick2) {
    console.log("handleClick2 が生成された。");
  }
  tmpHandleClick2 = handleClick2;

  return (
    <div>
      <p>state: {count}</p>
      <p>double: {double}</p>
      <button onClick={handleClick}>handleClick</button>
      <br />
      <p>state2: {count2}</p>
      <p>double2: {double2}</p>
      <button onClick={handleClick2}>handleClick2</button>
    </div>
  );
};

시운전의 결과

초기 표시 시

처음이라 모든 로그를 표시합니다.

handleClick을 누를 때

handleClick이 새로 생성되지 않았습니다.
handleClick은useCallback의 두 번째 인자에 빈 배열을 제공하기 때문에 처음 보일 때만 생성됩니다.
useCallback은 두 번째 매개 변수 진열에 포함된 값이 변할 때만 함수를 다시 생성합니다.

handleClick2를 누르면

useMemo에 전달된 두 번째 인자의count는 변경되지 않았기 때문에 더블을 계산하지 않습니다.

총결산

react의component가render에 걸렸을 때,component의 내용이 다시 실행됩니다
useMemo를 사용하면useCallback에서 불필요한 재계산, 재생성을 하지 않습니다.
당연한 일이지만 실제로 행동하니 배가 고프다.