Handle render phase updates explicitly

We fire a warning in development if a component is updated during
the render phase (with the exception of local hook updates, which have
their own defined behavior).

Because it's not a supported React pattern, we don't have that many
tests that trigger this path. But it is meant to have reasonable
semantics when it does happen, so that if it accidentally ships to
production, the app doesn't crash unnecessarily. The behavior is not
super well-defined, though.

There are also some _internal_ React implementation details that
intentionally to rely on this behavior. Most prominently, selective
hydration and useOpaqueIdentifier.

I need to tweak the behavior of render phase updates slightly as part
of a fix for useOpaqueIdentifier. This shouldn't cause a user-facing
change in behavior outside of useOpaqueIdentifier, but it does require
that we explicitly model render phase updates.

Author: acdlite

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -454,22 +454,35 @@ export function scheduleUpdateOnFiber(
   eventTime: number,
 ): FiberRoot | null {
   checkForNestedUpdates();
-  warnAboutRenderPhaseUpdatesInDEV(fiber);
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
   }
 
+  // Mark that the root has a pending update.
+  markRootUpdated(root, lane, eventTime);
+
+  if (
+    (executionContext & RenderContext) !== NoLanes &&
+    root === workInProgressRoot
+  ) {
+    // This update was dispatched during the render phase. This is a mistake
+    // if the update originates from user space (with the exception of local
+    // hook updates, which are handled differently and don't reach this
+    // function), but there are some internal React features that use this as
+    // an implementation detail, like selective hydration
+    // and useOpaqueIdentifier.
+    warnAboutRenderPhaseUpdatesInDEV(fiber);
+  } else {
+    // This is a normal update, scheduled from outside the render phase. For
+    // example, during an input event.
     if (enableUpdaterTracking) {
       if (isDevToolsPresent) {
         addFiberToLanesMap(root, fiber, lane);
       }
     }
 
-  // Mark that the root has a pending update.
-  markRootUpdated(root, lane, eventTime);
-
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       if (
         (executionContext & CommitContext) !== NoContext &&
@@ -533,7 +546,7 @@ export function scheduleUpdateOnFiber(
       resetRenderTimer();
       flushSyncCallbacksOnlyInLegacyMode();
     }
-
   return root;
 }
 
@@ -2697,7 +2710,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
-      (executionContext & RenderContext) !== NoContext &&
       !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
     ) {
       switch (fiber.tag) {

packages/react-reconciler/src/ReactFiberWorkLoop.old.js

@@ -454,22 +454,35 @@ export function scheduleUpdateOnFiber(
   eventTime: number,
 ): FiberRoot | null {
   checkForNestedUpdates();
-  warnAboutRenderPhaseUpdatesInDEV(fiber);
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
   }
 
+  // Mark that the root has a pending update.
+  markRootUpdated(root, lane, eventTime);
+
+  if (
+    (executionContext & RenderContext) !== NoLanes &&
+    root === workInProgressRoot
+  ) {
+    // This update was dispatched during the render phase. This is a mistake
+    // if the update originates from user space (with the exception of local
+    // hook updates, which are handled differently and don't reach this
+    // function), but there are some internal React features that use this as
+    // an implementation detail, like selective hydration
+    // and useOpaqueIdentifier.
+    warnAboutRenderPhaseUpdatesInDEV(fiber);
+  } else {
+    // This is a normal update, scheduled from outside the render phase. For
+    // example, during an input event.
     if (enableUpdaterTracking) {
       if (isDevToolsPresent) {
         addFiberToLanesMap(root, fiber, lane);
       }
     }
 
-  // Mark that the root has a pending update.
-  markRootUpdated(root, lane, eventTime);
-
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       if (
         (executionContext & CommitContext) !== NoContext &&
@@ -533,7 +546,7 @@ export function scheduleUpdateOnFiber(
       resetRenderTimer();
       flushSyncCallbacksOnlyInLegacyMode();
     }
-
   return root;
 }
 
@@ -2697,7 +2710,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
-      (executionContext & RenderContext) !== NoContext &&
       !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
     ) {
       switch (fiber.tag) {