diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index c98edc7a0bc57..dbb4e7a7973db 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -493,7 +493,9 @@ function commitBeforeMutationEffectsOnFiber( } switch (finishedWork.tag) { - case FunctionComponent: { + case FunctionComponent: + case ForwardRef: + case SimpleMemoComponent: { if (enableUseEffectEventHook) { if ((flags & Update) !== NoFlags) { const updateQueue: FunctionComponentUpdateQueue | null = @@ -510,10 +512,6 @@ function commitBeforeMutationEffectsOnFiber( } break; } - case ForwardRef: - case SimpleMemoComponent: { - break; - } case ClassComponent: { if ((flags & Snapshot) !== NoFlags) { if (current !== null) { diff --git a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js index 17b8d6d421f77..f263c9af2693f 100644 --- a/packages/react-reconciler/src/__tests__/useEffectEvent-test.js +++ b/packages/react-reconciler/src/__tests__/useEffectEvent-test.js @@ -850,4 +850,82 @@ describe('useEffectEvent', () => { ); assertLog(['Add to cart', 'url: /shop/2, numberOfItems: 1']); }); + + it('reads the latest context value in memo Components', async () => { + const MyContext = createContext('default'); + + let logContextValue; + const ContextReader = React.memo(function ContextReader() { + const value = useContext(MyContext); + Scheduler.log('ContextReader: ' + value); + const fireLogContextValue = useEffectEvent(() => { + Scheduler.log('ContextReader (Effect event): ' + value); + }); + useEffect(() => { + logContextValue = fireLogContextValue; + }, []); + return null; + }); + + function App({value}) { + return ( + + + + ); + } + + const root = ReactNoop.createRoot(); + await act(() => root.render()); + assertLog(['ContextReader: first']); + + logContextValue(); + + assertLog(['ContextReader (Effect event): first']); + + await act(() => root.render()); + assertLog(['ContextReader: second']); + + logContextValue(); + assertLog(['ContextReader (Effect event): second']); + }); + + it('reads the latest context value in forwardRef Components', async () => { + const MyContext = createContext('default'); + + let logContextValue; + const ContextReader = React.forwardRef(function ContextReader(props, ref) { + const value = useContext(MyContext); + Scheduler.log('ContextReader: ' + value); + const fireLogContextValue = useEffectEvent(() => { + Scheduler.log('ContextReader (Effect event): ' + value); + }); + useEffect(() => { + logContextValue = fireLogContextValue; + }, []); + return null; + }); + + function App({value}) { + return ( + + + + ); + } + + const root = ReactNoop.createRoot(); + await act(() => root.render()); + assertLog(['ContextReader: first']); + + logContextValue(); + + assertLog(['ContextReader (Effect event): first']); + + await act(() => root.render()); + assertLog(['ContextReader: second']); + + logContextValue(); + assertLog(['ContextReader (Effect event): second']); + }); });