useCallback

useCallback이란?

useMemo와 비슷한데 useCallback은 함수 자체를 memoization하는 hook이다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

예시

예시로 아래 코드를 살펴보겠다.

import { useCallback, useEffect, useState } from "react";
import Box from "./Box";

function Callback() {
  const [size, setSize] = useState(100);
  const [isDark, setIsDart] = useState(false);

  const createBoxStyle = useCallback(() => {
    return {
      backgroundColor: "pink",
      width: `${size}px`,
      height: `${size}px`,
    };
  }, [size]);

  return (
    <div style={{ background: isDark ? "black" : "white" }}>
      <input
        type="number"
        value={size}
        onChange={(e) => setSize(e.target.value)}
      />
      <button onClick={() => setIsDart(!isDark)}>Change Theme</button>
      <Box createBoxStyle={createBoxStyle} />
    </div>
  );
}

만약 createBoxStyle을 useCallback 처리를 해주지 않았다면 버튼을 눌러 뒷배경을 바꿀 때, 렌더링 되면서 createBoxStyle 함수가 초기화가 되게 된다.

import { useEffect, useState } from "react";

function Box({ createBoxStyle }) {
  const [style, setStyle] = useState({});

  useEffect(() => {
    setStyle(createBoxStyle());
  }, [createBoxStyle]);
  return <div style={style}></div>;
}

export default Box;

그렇게 되면 createBoxStyle 함수가 이전과 달라져 useEffect가 실행되게 된다. 하지만 useCallback으로 memoization을 하게 되면 위와 같은 일이 일어나지 않는다.

useCallback을 사용하면 불필요한 렌더링을 방지할 수 있다.

참고문헌

https://ko.reactjs.org/docs/hooks-reference.html#usecallback
https://www.youtube.com/watch?v=XfUF9qLa3mU