ReactJS 훅 패턴 ~useEffectEvent 패턴~

Source: Dev.to

개요

useEffectEvent는 React 19에서 도입되었습니다. 이 훅을 사용하면 효과 안에서 최신 props나 state 값을 접근할 수 있지만, 그 때문에 효과가 다시 실행되지는 않습니다.
React에서 흔히 겪는 문제는 의존성 배열에 값을 넣어두면 불필요한 재렌더링이 발생한다는 점입니다. useEffectEvent는 이러한 값을 의존성에서 분리하고 콜백의 인자로 제공함으로써 문제를 해결합니다.

예시

import { useState, useEffect, useEffectEvent } from "react";

function trackPage(url, itemCount) {
  console.log(`Url: ${url} | Items in cart: ${itemCount}`);
}

function Page({ url }) {
  const [itemCount, setItemCount] = useState(0);

  // useEffectEvent는 `itemCount`를 최신 상태로 접근하게 해 주지만
  // 효과 의존성 배열에 넣을 필요는 없습니다.
  const onVisit = useEffectEvent(() => trackPage(url, itemCount));

  useEffect(() => {
    onVisit();
  }, [url]); // `itemCount`는 의존성 배열에서 제외되었습니다.

  return (
    <div>
      <h2>Current Page: {url}</h2>
      <p>Items in cart: {itemCount}</p>
      <button onClick={() => setItemCount(itemCount + 1)}>
        Add Item to Cart
      </button>
      <button
        onClick={() => setItemCount(0)}
        disabled={itemCount === 0}
      >
        Clear Cart
      </button>
    </div>
  );
}

function App() {
  const [url, setUrl] = useState("/home");

  return (
    <div>
      <button onClick={() => setUrl("/home")}>Home</button>
      <button onClick={() => setUrl("/cart")}>Cart</button>
      <button onClick={() => setUrl("/about")}>About</button>
      <Page url={url} />
    </div>
  );
}

export default App;