Update refs on remount

Summary:
This fixes a bug where a ref to a class would get nulled after the class is edited. Now it's appopriately updated.

This is technically a partial sync on top of my last cherry-picked one. It only picks up this commit: 9914a19190. The changes are DEV-only and only affect Fast Refresh.

Reviewed By: motiz88

Differential Revision: D16543751

fbshipit-source-id: c1fc393e78d0e13070721037d16734c9ece38bc9

Libraries/Renderer/implementations/ReactFabric-dev.fb.js

@@ -9975,7 +9975,7 @@ function updateReducer(reducer, initialArg, init) {
         }
 
         hook.memoizedState = newState;
-        // Don't persist the state accumulated from the render phase updates to
+        // Don't persist the state accumlated from the render phase updates to
         // the base state unless the queue is empty.
         // TODO: Not sure if this is the desired semantics, but it's what we
         // do for gDSFP. I can't remember why.
@@ -13255,6 +13255,7 @@ function remountFiber(current$$1, oldWorkInProgress, newWorkInProgress) {
     newWorkInProgress.index = oldWorkInProgress.index;
     newWorkInProgress.sibling = oldWorkInProgress.sibling;
     newWorkInProgress.return = oldWorkInProgress.return;
+    newWorkInProgress.ref = oldWorkInProgress.ref;
 
     // Replace the child/sibling pointers above it.
     if (oldWorkInProgress === returnFiber.child) {
@@ -14233,7 +14234,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in concurrent mode we can suspend,
+        // If this subtreee is running in concurrent mode we can suspend,
         // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
@@ -14247,7 +14248,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if not prevDidTimeout.
         if (nextDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children.
           workInProgress.effectTag |= Update;
         }
@@ -14256,7 +14257,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if these values are non equal, i.e. it changed.
         if (nextDidTimeout || prevDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children. In mutation mode, we also need the flag to
           // *unhide* children that were previously hidden, so check if the
           // is currently timed out, too.
@@ -15901,7 +15902,7 @@ function throwException(
               sourceFiber.tag = IncompleteClassComponent;
             } else {
               // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
+              // since it's known to be in an inconsistent state. Use a force updte to
               // prevent a bail out.
               var update = createUpdate(Sync);
               update.tag = ForceUpdate;
@@ -16291,7 +16292,7 @@ function scheduleUpdateOnFiber(fiber, expirationTime) {
         // Flush the synchronous work now, wnless we're already working or inside
         // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
         // scheduleCallbackForFiber to preserve the ability to schedule a callback
-        // without immediately flushing it. We only do this for user-initiated
+        // without immediately flushing it. We only do this for user-initated
         // updates, to preserve historical behavior of sync mode.
         flushImmediateQueue();
       }
@@ -16758,7 +16759,7 @@ function renderRoot(root, expirationTime, isSync) {
       if (!isSync) {
         // If we're rendering asynchronously, it's possible the error was
         // caused by tearing due to a mutation during an event. Try rendering
-        // one more time without yielding to events.
+        // one more time without yiedling to events.
         prepareFreshStack(root, expirationTime);
         scheduleCallback(
           ImmediatePriority,

Libraries/Renderer/implementations/ReactFabric-dev.js

@@ -9971,7 +9971,7 @@ function updateReducer(reducer, initialArg, init) {
         }
 
         hook.memoizedState = newState;
-        // Don't persist the state accumulated from the render phase updates to
+        // Don't persist the state accumlated from the render phase updates to
         // the base state unless the queue is empty.
         // TODO: Not sure if this is the desired semantics, but it's what we
         // do for gDSFP. I can't remember why.
@@ -13251,6 +13251,7 @@ function remountFiber(current$$1, oldWorkInProgress, newWorkInProgress) {
     newWorkInProgress.index = oldWorkInProgress.index;
     newWorkInProgress.sibling = oldWorkInProgress.sibling;
     newWorkInProgress.return = oldWorkInProgress.return;
+    newWorkInProgress.ref = oldWorkInProgress.ref;
 
     // Replace the child/sibling pointers above it.
     if (oldWorkInProgress === returnFiber.child) {
@@ -14229,7 +14230,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in concurrent mode we can suspend,
+        // If this subtreee is running in concurrent mode we can suspend,
         // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
@@ -14243,7 +14244,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if not prevDidTimeout.
         if (nextDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children.
           workInProgress.effectTag |= Update;
         }
@@ -14252,7 +14253,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if these values are non equal, i.e. it changed.
         if (nextDidTimeout || prevDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children. In mutation mode, we also need the flag to
           // *unhide* children that were previously hidden, so check if the
           // is currently timed out, too.
@@ -15897,7 +15898,7 @@ function throwException(
               sourceFiber.tag = IncompleteClassComponent;
             } else {
               // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
+              // since it's known to be in an inconsistent state. Use a force updte to
               // prevent a bail out.
               var update = createUpdate(Sync);
               update.tag = ForceUpdate;
@@ -16287,7 +16288,7 @@ function scheduleUpdateOnFiber(fiber, expirationTime) {
         // Flush the synchronous work now, wnless we're already working or inside
         // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
         // scheduleCallbackForFiber to preserve the ability to schedule a callback
-        // without immediately flushing it. We only do this for user-initiated
+        // without immediately flushing it. We only do this for user-initated
         // updates, to preserve historical behavior of sync mode.
         flushImmediateQueue();
       }
@@ -16754,7 +16755,7 @@ function renderRoot(root, expirationTime, isSync) {
       if (!isSync) {
         // If we're rendering asynchronously, it's possible the error was
         // caused by tearing due to a mutation during an event. Try rendering
-        // one more time without yielding to events.
+        // one more time without yiedling to events.
         prepareFreshStack(root, expirationTime);
         scheduleCallback(
           ImmediatePriority,

Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js

@@ -10290,7 +10290,7 @@ function updateReducer(reducer, initialArg, init) {
         }
 
         hook.memoizedState = newState;
-        // Don't persist the state accumulated from the render phase updates to
+        // Don't persist the state accumlated from the render phase updates to
         // the base state unless the queue is empty.
         // TODO: Not sure if this is the desired semantics, but it's what we
         // do for gDSFP. I can't remember why.
@@ -13570,6 +13570,7 @@ function remountFiber(current$$1, oldWorkInProgress, newWorkInProgress) {
     newWorkInProgress.index = oldWorkInProgress.index;
     newWorkInProgress.sibling = oldWorkInProgress.sibling;
     newWorkInProgress.return = oldWorkInProgress.return;
+    newWorkInProgress.ref = oldWorkInProgress.ref;
 
     // Replace the child/sibling pointers above it.
     if (oldWorkInProgress === returnFiber.child) {
@@ -14548,7 +14549,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in concurrent mode we can suspend,
+        // If this subtreee is running in concurrent mode we can suspend,
         // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
@@ -14562,7 +14563,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if not prevDidTimeout.
         if (nextDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children.
           workInProgress.effectTag |= Update;
         }
@@ -14571,7 +14572,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if these values are non equal, i.e. it changed.
         if (nextDidTimeout || prevDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children. In mutation mode, we also need the flag to
           // *unhide* children that were previously hidden, so check if the
           // is currently timed out, too.
@@ -16215,7 +16216,7 @@ function throwException(
               sourceFiber.tag = IncompleteClassComponent;
             } else {
               // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
+              // since it's known to be in an inconsistent state. Use a force updte to
               // prevent a bail out.
               var update = createUpdate(Sync);
               update.tag = ForceUpdate;
@@ -16605,7 +16606,7 @@ function scheduleUpdateOnFiber(fiber, expirationTime) {
         // Flush the synchronous work now, wnless we're already working or inside
         // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
         // scheduleCallbackForFiber to preserve the ability to schedule a callback
-        // without immediately flushing it. We only do this for user-initiated
+        // without immediately flushing it. We only do this for user-initated
         // updates, to preserve historical behavior of sync mode.
         flushImmediateQueue();
       }
@@ -17072,7 +17073,7 @@ function renderRoot(root, expirationTime, isSync) {
       if (!isSync) {
         // If we're rendering asynchronously, it's possible the error was
         // caused by tearing due to a mutation during an event. Try rendering
-        // one more time without yielding to events.
+        // one more time without yiedling to events.
         prepareFreshStack(root, expirationTime);
         scheduleCallback(
           ImmediatePriority,

Libraries/Renderer/implementations/ReactNativeRenderer-dev.js

@@ -10286,7 +10286,7 @@ function updateReducer(reducer, initialArg, init) {
         }
 
         hook.memoizedState = newState;
-        // Don't persist the state accumulated from the render phase updates to
+        // Don't persist the state accumlated from the render phase updates to
         // the base state unless the queue is empty.
         // TODO: Not sure if this is the desired semantics, but it's what we
         // do for gDSFP. I can't remember why.
@@ -13566,6 +13566,7 @@ function remountFiber(current$$1, oldWorkInProgress, newWorkInProgress) {
     newWorkInProgress.index = oldWorkInProgress.index;
     newWorkInProgress.sibling = oldWorkInProgress.sibling;
     newWorkInProgress.return = oldWorkInProgress.return;
+    newWorkInProgress.ref = oldWorkInProgress.ref;
 
     // Replace the child/sibling pointers above it.
     if (oldWorkInProgress === returnFiber.child) {
@@ -14544,7 +14545,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in concurrent mode we can suspend,
+        // If this subtreee is running in concurrent mode we can suspend,
         // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
@@ -14558,7 +14559,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if not prevDidTimeout.
         if (nextDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children.
           workInProgress.effectTag |= Update;
         }
@@ -14567,7 +14568,7 @@ function completeWork(current, workInProgress, renderExpirationTime) {
         // TODO: Only schedule updates if these values are non equal, i.e. it changed.
         if (nextDidTimeout || prevDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
+          // retry listener to the proimse. This flag is also used to hide the
           // primary children. In mutation mode, we also need the flag to
           // *unhide* children that were previously hidden, so check if the
           // is currently timed out, too.
@@ -16211,7 +16212,7 @@ function throwException(
               sourceFiber.tag = IncompleteClassComponent;
             } else {
               // When we try rendering again, we should not reuse the current fiber,
-              // since it's known to be in an inconsistent state. Use a force update to
+              // since it's known to be in an inconsistent state. Use a force updte to
               // prevent a bail out.
               var update = createUpdate(Sync);
               update.tag = ForceUpdate;
@@ -16601,7 +16602,7 @@ function scheduleUpdateOnFiber(fiber, expirationTime) {
         // Flush the synchronous work now, wnless we're already working or inside
         // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
         // scheduleCallbackForFiber to preserve the ability to schedule a callback
-        // without immediately flushing it. We only do this for user-initiated
+        // without immediately flushing it. We only do this for user-initated
         // updates, to preserve historical behavior of sync mode.
         flushImmediateQueue();
       }
@@ -17068,7 +17069,7 @@ function renderRoot(root, expirationTime, isSync) {
       if (!isSync) {
         // If we're rendering asynchronously, it's possible the error was
         // caused by tearing due to a mutation during an event. Try rendering
-        // one more time without yielding to events.
+        // one more time without yiedling to events.
         prepareFreshStack(root, expirationTime);
         scheduleCallback(
           ImmediatePriority,