Skip to content

Bug: useEffectEvent retain the first render value when is used inside a component wrapped in memo() #35187

@gffuma

Description

@gffuma

useEffectEvent retains the first render value when it's used inside a component wrapped in memo()

React version: 19.2.0

Steps To Reproduce

Minimal repro:

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

function App() {
  const [counter, setCounter] = useState(0);

  const hello = useEffectEvent(() => {
    console.log(counter);
  });

  useEffect(() => {
    const id = setInterval(() => {
      hello();
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>{counter}</button>
    </div>
  );
}

export default memo(App);

Link to code example:
https://codesandbox.io/p/sandbox/gj356q

The current behavior

If you click the button and increment the counter you always see 0 in the log. By removing the memo you will see the current counter value.

The expected behavior

See the latest counter value even if the component is wrapped in memo, since the documentation https://react.dev/reference/react/useEffectEvent does not describe any different behavior if component is wrapped in memo.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions