ReactJS Hook Pattern ~useEffectEvent Pattern~

・When you want to access the latest values, such as props or state, without causing the Effect re-render, useEffectEvent hook solves this issue by extracting non-reactive logic from the Effect.

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

function trackPageView(url, itemCount) {
  console.log(`Page url: ${url} | Items: ${itemCount}`);
}

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

  const onVisit = useEffectEvent( (url) => trackPageView(url, itemCount))

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

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

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

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

export default App;