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']);
+ });
});