[Fiber] Ensure Effect events read latest values in forwardRef and memo() Components

Author: eps1lon

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) {

packages/react-reconciler/src/__tests__/useEffectEvent-test.js

@@ -887,6 +887,45 @@ describe('useEffectEvent', () => {
     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 (
+        <MyContext.Provider value={value}>
+          <ContextReader />
+        </MyContext.Provider>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App value="first" />));
+    assertLog(['ContextReader: first']);
+
+    logContextValue();
+
     assertLog(['ContextReader (Effect event): first']);
+
+    await act(() => root.render(<App value="second" />));
+    assertLog(['ContextReader: second']);
+
+    logContextValue();
+    assertLog(['ContextReader (Effect event): second']);
   });
 });