ReactJS Hook 模式 ~useEffectEvent 模式~

Source: Dev.to

Overview

useEffectEvent 在 React 19 中引入。该 Hook 让你能够在 effect 中访问最新的 props 或 state 值，而不会导致 effect 重新执行。
在 React 中，一个常见的问题是当值被写入依赖数组时会触发不必要的重新渲染。useEffectEvent 通过将这些值从依赖数组中抽离出来，并作为回调函数的参数传入，从而解决了这个问题。

Example

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 gives access to the latest `itemCount` without
  // needing to list it in the effect dependencies.
  const onVisit = useEffectEvent(() => trackPage(url, itemCount));

  useEffect(() => {
    onVisit();
  }, [url]); // `itemCount` is omitted from the dependency array

  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;