Bug: Stale closures with `useEffectEvent`

[OliverJAsh]

React version: 19.2

Steps To Reproduce

1. Open the reduced test case and view the console
2. Click the "Home" link (this causes navigationType to change to REPLACE)

function App() {
  const navigationType = useNavigationType();
  // ✅ This is REPLACE after clicking the link.
  console.log('render', navigationType);

  const fn = useEffectEvent(() => {
    // ❌ But this is always POP. It's not seeing the latest value!
    console.log('effect event', navigationType);
  });
  useEffect(() => {
    setInterval(() => {
      fn();
    }, 3000);
  }, []);

  return (
    <>
      <Link to="/">Home</Link>
      <Outlet />
    </>
  );
}

// 🤷‍♂️ Removing `memo` here fixes the problem.
export default memo(App);

Link to code example:

https://stackblitz.com/edit/github-utjrgufd?file=app%2Froot.tsx

The current behavior

The Effect Event receives a stale value from navigationType (POP).

The expected behavior

The Effect Event should receive the latest value from navigationType (REPLACE).

[Ashish-simpleCoder]

@OliverJAsh, Somehow it seems to break the reactivity of useEffectEvent when wrapping the component within React.memo.

I also tried it with seperate Counter component, and it is ineed giving out stale value when wrapped inside React.memo.

Link to code:-
https://stackblitz.com/edit/vitejs-vite-tu2o8a6e?file=src%2FApp.tsx

[eps1lon]

This seems to work just fine with just React: https://codesandbox.io/p/sandbox/clever-sinoussi-ds5sxl?file=%2Fsrc%2Findex.js

I would suggest filing this against react-router first to rule out any issues with useNavigationType. They're using Context internally but maybe they're setting the value differently.

[OliverJAsh]

@eps1lon The issue reproduces in your example as soon as you add memo: https://codesandbox.io/p/sandbox/useeffectevent-sees-latest-context-forked-lf4zdh