Bug: useCallback doesn't work sometimes inside memo component

[yahyaensi]

React: 18.3.1

In the following snippet (taken from React documentation), the console.log prints always false because each time the component rerendered, useCallback returns a new function reference: (only when the component is nested inside ProductPage component, but if I put ShippingForm directly under App component useCallback works fine)

let lastFakeFn = null;

const ShippingForm = memo(({ onSubmit }) => {
    const [count, setCount] = useState(1);

    const fakeFn = useCallback(() => {

    }, []);
    console.log(lastFakeFn === fakeFn)
    lastFakeFn = fakeFn;

    return (
            <label>
                Number of items:
                <button type="button" onClick={() => setCount(count - 1)}>–</button>
                {count}
                <button type="button" onClick={() => setCount(count + 1)}>+</button>
            </label>
    );
});

[yahyaensi]

I identified the problem, it's <React.StrictMode>

[testhowtest]

This issue is similar to #17783, #17221, and #15774. They might share similarities in causing unnecessary re-renders or failing to effectively memoize callback functions, but each problem seems to represent a unique scenario or manifestation of the issue. Is that correct?

[yahyaensi]

Yes I think so

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!