useEvent

useEvent
useEvent는 deps가 없다. useEvent는 해당 함수가 호출되는 순간에 props나 state의 값을 확인하도록 했기 때문에 deps가 없고, 그 값들의 최신 값을 반영할 수 있다. 그것도 새롭게 정의하는 것이 아니라 계속 같은 주소의 함수로 말이다.
useEvent를 잘 활용하면 Effect와 Event를 구분해서 활용할 수 있다.
useEvent는 RFC(RFC: Request For Comment, 개발에 있어 필요한 기술, 연구 결과, 절차 등을 기술 해놓은 메모)이기 때문에 출시된 것이 아니다.
React의 실행 모델은 대부분 의존성 배열을 사용하고 있고 이는 컴포넌트가 너무 많이 리렌더된다거나 훅이 너무 많이 재실행되는 문제가 있다. 그렇다고 해서 의존성 배열에서 제거하는 것은 추적하기 어려운 버그를 발생 시킬 위험이 있으므로 React에서 권장하지 않는다.
useEvent는 props/state의 최신 값을 반영하면서도 함수에 대한 변하지 않는 참조를 보장하기 위해 작성되었다.
useEvent 훅은 의존에 따라 새로운 함수를 만들지 않고도 함수에 대한 안정적인 참조를 보장하기 위해 작성되었다.

useEvent - 탄생 배경

React의 실행 모델은 대부분 현재 값과 이전 값을 비교하여 동작한다. 이는 컴포넌트 내부와 useEffect, useMemo, useCallback과 같은 훅에서 발생한다.

function MyApp() {
  const [count, setCount] = useState(0);

  return <Counter count={count} />;
}

Counter component는 count 변수가 변경되면 리렌더된다.
count가 변경될 때 어떠한 effect(useEffect 훅에 넘긴 함수를 effect라고 부른다.)가 실행되기를 원한다고 가정해 보자. 아래처럼 useEffect 훅을 사용할 수 있을 것이다.

function MyApp() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return <Counter count={count} />;
}

count를 useEffect훅의 의존성 배열에 추가했기 때문에 effect는 count가 변경될 때마다 재실행될 것이다.