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