React sync for revisions aa94237...f24a0da

Summary:
This sync includes the following changes:
- **[f24a0da6e](https://github.com/facebook/react/commit/f24a0da6e )**: Fix useImperativeHandle to have no deps by default (#14801) //<Dan Abramov>//
- **[1fecba923](https://github.com/facebook/react/commit/1fecba923 )**: Fix crash unmounting an empty Portal (#14820) //<Dan Abramov>//
- **[c11015ff4](https://github.com/facebook/react/commit/c11015ff4 )**: fix spelling mistakes (#14805) //<zhuoli99>//
- **[3e295edd5](https://github.com/facebook/react/commit/3e295edd5 )**: Typo fix in comment (#14787) //<Deniz Susman>//
- **[1d48b4a68](https://github.com/facebook/react/commit/1d48b4a68 )**: Fix hydration with createRoot warning (#14808) //<Sebastian Markbåge>//

Release Notes:
[GENERAL] [Changed] - React sync for revisions aa94237...f24a0da

Reviewed By: cpojer

Differential Revision: D14030552

fbshipit-source-id: f8df9d8e532b2afef59dbbc10715bd52fd22b355

Libraries/Renderer/REVISION

@@ -1 +1 @@
-aa9423701e99a194d65a8b835882502902a65a50
+f24a0da6e0f59484e5aafd0825bb1a6ed27d7182

Libraries/Renderer/oss/ReactFabric-dev.js

@@ -104,7 +104,7 @@ var invokeGuardedCallbackImpl = function(
   // invokeGuardedCallback uses a try-catch, all user exceptions are treated
   // like caught exceptions, and the DevTools won't pause unless the developer
   // takes the extra step of enabling pause on caught exceptions. This is
-  // untintuitive, though, because even though React has caught the error, from
+  // unintuitive, though, because even though React has caught the error, from
   // the developer's perspective, the error is uncaught.
   //
   // To preserve the expected "Pause on exceptions" behavior, we don't use a
@@ -8252,7 +8252,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChildren,
     expirationTime
   ) {
-    // This algorithm can't optimize by searching from boths ends since we
+    // This algorithm can't optimize by searching from both ends since we
     // don't have backpointers on fibers. I'm trying to see how far we can get
     // with that model. If it ends up not being worth the tradeoffs, we can
     // add it later.
@@ -9687,7 +9687,7 @@ function mountImperativeHandle(ref, create, deps) {
 
   // TODO: If deps are provided, should we skip comparing the ref itself?
   var effectDeps =
-    deps !== null && deps !== undefined ? deps.concat([ref]) : [ref];
+    deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
   return mountEffectImpl(
     Update,
@@ -9711,7 +9711,7 @@ function updateImperativeHandle(ref, create, deps) {
 
   // TODO: If deps are provided, should we skip comparing the ref itself?
   var effectDeps =
-    deps !== null && deps !== undefined ? deps.concat([ref]) : [ref];
+    deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
   return updateEffectImpl(
     Update,
@@ -9783,7 +9783,7 @@ function updateMemo(nextCreate, deps) {
 var shouldWarnForUnbatchedSetState = false;
 
 {
-  // jest isnt' a 'global', it's just exposed to tests via a wrapped function
+  // jest isn't a 'global', it's just exposed to tests via a wrapped function
   // further, this isn't a test file, so flow doesn't recognize the symbol. So...
   // $FlowExpectedError - because requirements don't give a damn about your type sigs.
   if ("undefined" !== typeof jest) {
@@ -14658,7 +14658,7 @@ function commitLifeCycles(
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
   if (supportsMutation) {
-    // We only have the top Fiber that was inserted but we need recurse down its
+    // We only have the top Fiber that was inserted but we need to recurse down its
     var node = finishedWork;
     while (true) {
       if (node.tag === HostComponent) {
@@ -15002,7 +15002,7 @@ function commitPlacement(finishedWork) {
   }
 
   var before = getHostSibling(finishedWork);
-  // We only have the top Fiber that was inserted but we need recurse down its
+  // We only have the top Fiber that was inserted but we need to recurse down its
   // children to find all the terminal nodes.
   var node = finishedWork;
   while (true) {
@@ -15044,7 +15044,7 @@ function commitPlacement(finishedWork) {
 }
 
 function unmountHostComponents(current$$1) {
-  // We only have the top Fiber that was deleted but we need recurse down its
+  // We only have the top Fiber that was deleted but we need to recurse down its
   var node = current$$1;
 
   // Each iteration, currentParent is populated with node's host parent if not
@@ -15094,12 +15094,12 @@ function unmountHostComponents(current$$1) {
       }
       // Don't visit children because we already visited them.
     } else if (node.tag === HostPortal) {
-      // When we go into a portal, it becomes the parent to remove from.
-      // We will reassign it back when we pop the portal on the way up.
-      currentParent = node.stateNode.containerInfo;
-      currentParentIsContainer = true;
-      // Visit children because portals might contain host components.
       if (node.child !== null) {
+        // When we go into a portal, it becomes the parent to remove from.
+        // We will reassign it back when we pop the portal on the way up.
+        currentParent = node.stateNode.containerInfo;
+        currentParentIsContainer = true;
+        // Visit children because portals might contain host components.
         node.child.return = node;
         node = node.child;
         continue;
@@ -16933,7 +16933,7 @@ function renderRoot(root, isYieldy) {
       return;
     } else if (
       // There's no lower priority work, but we're rendering asynchronously.
-      // Synchronsouly attempt to render the same level one more time. This is
+      // Synchronously attempt to render the same level one more time. This is
       // similar to a suspend, but without a timeout because we're not waiting
       // for a promise to resolve.
       !root.didError &&

Libraries/Renderer/oss/ReactFabric-prod.js

@@ -3380,7 +3380,7 @@ var ContextOnlyDispatcher = {
       return mountEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return mountEffectImpl(
         4,
         UnmountMutation | MountLayout,
@@ -3459,7 +3459,7 @@ var ContextOnlyDispatcher = {
       return updateEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return updateEffectImpl(
         4,
         UnmountMutation | MountLayout,

Libraries/Renderer/oss/ReactFabric-profiling.js

@@ -3400,7 +3400,7 @@ var ContextOnlyDispatcher = {
       return mountEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return mountEffectImpl(
         4,
         UnmountMutation | MountLayout,
@@ -3479,7 +3479,7 @@ var ContextOnlyDispatcher = {
       return updateEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return updateEffectImpl(
         4,
         UnmountMutation | MountLayout,

Libraries/Renderer/oss/ReactNativeRenderer-dev.js

@@ -104,7 +104,7 @@ var invokeGuardedCallbackImpl = function(
   // invokeGuardedCallback uses a try-catch, all user exceptions are treated
   // like caught exceptions, and the DevTools won't pause unless the developer
   // takes the extra step of enabling pause on caught exceptions. This is
-  // untintuitive, though, because even though React has caught the error, from
+  // unintuitive, though, because even though React has caught the error, from
   // the developer's perspective, the error is uncaught.
   //
   // To preserve the expected "Pause on exceptions" behavior, we don't use a
@@ -8543,7 +8543,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChildren,
     expirationTime
   ) {
-    // This algorithm can't optimize by searching from boths ends since we
+    // This algorithm can't optimize by searching from both ends since we
     // don't have backpointers on fibers. I'm trying to see how far we can get
     // with that model. If it ends up not being worth the tradeoffs, we can
     // add it later.
@@ -9978,7 +9978,7 @@ function mountImperativeHandle(ref, create, deps) {
 
   // TODO: If deps are provided, should we skip comparing the ref itself?
   var effectDeps =
-    deps !== null && deps !== undefined ? deps.concat([ref]) : [ref];
+    deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
   return mountEffectImpl(
     Update,
@@ -10002,7 +10002,7 @@ function updateImperativeHandle(ref, create, deps) {
 
   // TODO: If deps are provided, should we skip comparing the ref itself?
   var effectDeps =
-    deps !== null && deps !== undefined ? deps.concat([ref]) : [ref];
+    deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
   return updateEffectImpl(
     Update,
@@ -10074,7 +10074,7 @@ function updateMemo(nextCreate, deps) {
 var shouldWarnForUnbatchedSetState = false;
 
 {
-  // jest isnt' a 'global', it's just exposed to tests via a wrapped function
+  // jest isn't a 'global', it's just exposed to tests via a wrapped function
   // further, this isn't a test file, so flow doesn't recognize the symbol. So...
   // $FlowExpectedError - because requirements don't give a damn about your type sigs.
   if ("undefined" !== typeof jest) {
@@ -14948,7 +14948,7 @@ function commitLifeCycles(
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
   if (supportsMutation) {
-    // We only have the top Fiber that was inserted but we need recurse down its
+    // We only have the top Fiber that was inserted but we need to recurse down its
     var node = finishedWork;
     while (true) {
       if (node.tag === HostComponent) {
@@ -15292,7 +15292,7 @@ function commitPlacement(finishedWork) {
   }
 
   var before = getHostSibling(finishedWork);
-  // We only have the top Fiber that was inserted but we need recurse down its
+  // We only have the top Fiber that was inserted but we need to recurse down its
   // children to find all the terminal nodes.
   var node = finishedWork;
   while (true) {
@@ -15334,7 +15334,7 @@ function commitPlacement(finishedWork) {
 }
 
 function unmountHostComponents(current$$1) {
-  // We only have the top Fiber that was deleted but we need recurse down its
+  // We only have the top Fiber that was deleted but we need to recurse down its
   var node = current$$1;
 
   // Each iteration, currentParent is populated with node's host parent if not
@@ -15384,12 +15384,12 @@ function unmountHostComponents(current$$1) {
       }
       // Don't visit children because we already visited them.
     } else if (node.tag === HostPortal) {
-      // When we go into a portal, it becomes the parent to remove from.
-      // We will reassign it back when we pop the portal on the way up.
-      currentParent = node.stateNode.containerInfo;
-      currentParentIsContainer = true;
-      // Visit children because portals might contain host components.
       if (node.child !== null) {
+        // When we go into a portal, it becomes the parent to remove from.
+        // We will reassign it back when we pop the portal on the way up.
+        currentParent = node.stateNode.containerInfo;
+        currentParentIsContainer = true;
+        // Visit children because portals might contain host components.
         node.child.return = node;
         node = node.child;
         continue;
@@ -17223,7 +17223,7 @@ function renderRoot(root, isYieldy) {
       return;
     } else if (
       // There's no lower priority work, but we're rendering asynchronously.
-      // Synchronsouly attempt to render the same level one more time. This is
+      // Synchronously attempt to render the same level one more time. This is
       // similar to a suspend, but without a timeout because we're not waiting
       // for a promise to resolve.
       !root.didError &&

Libraries/Renderer/oss/ReactNativeRenderer-prod.js

@@ -3416,7 +3416,7 @@ var ContextOnlyDispatcher = {
       return mountEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return mountEffectImpl(
         4,
         UnmountMutation | MountLayout,
@@ -3495,7 +3495,7 @@ var ContextOnlyDispatcher = {
       return updateEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return updateEffectImpl(
         4,
         UnmountMutation | MountLayout,
@@ -5467,13 +5467,15 @@ function unmountHostComponents(current$$1) {
         node$jscomp$0.splice(child, 1);
         UIManager.manageChildren(root._nativeTag, [], [], [], [], [child]);
       }
-    } else if (
-      (4 === node.tag
-        ? ((currentParent = node.stateNode.containerInfo),
-          (currentParentIsContainer = !0))
-        : commitUnmount(node),
-      null !== node.child)
-    ) {
+    } else if (4 === node.tag) {
+      if (null !== node.child) {
+        currentParent = node.stateNode.containerInfo;
+        currentParentIsContainer = !0;
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+    } else if ((commitUnmount(node), null !== node.child)) {
       node.child.return = node;
       node = node.child;
       continue;

Libraries/Renderer/oss/ReactNativeRenderer-profiling.js

@@ -3436,7 +3436,7 @@ var ContextOnlyDispatcher = {
       return mountEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return mountEffectImpl(
         4,
         UnmountMutation | MountLayout,
@@ -3515,7 +3515,7 @@ var ContextOnlyDispatcher = {
       return updateEffectImpl(516, UnmountPassive | MountPassive, create, deps);
     },
     useImperativeHandle: function(ref, create, deps) {
-      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : [ref];
+      deps = null !== deps && void 0 !== deps ? deps.concat([ref]) : null;
       return updateEffectImpl(
         4,
         UnmountMutation | MountLayout,
@@ -5540,13 +5540,15 @@ function unmountHostComponents(current$$1) {
         node$jscomp$0.splice(child, 1);
         UIManager.manageChildren(root._nativeTag, [], [], [], [], [child]);
       }
-    } else if (
-      (4 === node.tag
-        ? ((currentParent = node.stateNode.containerInfo),
-          (currentParentIsContainer = !0))
-        : commitUnmount(node),
-      null !== node.child)
-    ) {
+    } else if (4 === node.tag) {
+      if (null !== node.child) {
+        currentParent = node.stateNode.containerInfo;
+        currentParentIsContainer = !0;
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+    } else if ((commitUnmount(node), null !== node.child)) {
       node.child.return = node;
       node = node.child;
       continue;

yarn.lock

@@ -3020,13 +3020,12 @@ fbjs-scripts@^1.0.0:
     semver "^5.1.0"
     through2 "^2.0.0"
 
-fbjs@1.0.0, fbjs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
-  integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
+fbjs@^0.8.9:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
   dependencies:
-    core-js "^2.4.1"
-    fbjs-css-vars "^1.0.0"
+    core-js "^1.0.0"
     isomorphic-fetch "^2.1.1"
     loose-envify "^1.0.0"
     object-assign "^4.1.0"
@@ -3034,12 +3033,13 @@ fbjs@1.0.0, fbjs@^1.0.0:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
-fbjs@^0.8.9:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+fbjs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
+  integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
   dependencies:
-    core-js "^1.0.0"
+    core-js "^2.4.1"
+    fbjs-css-vars "^1.0.0"
     isomorphic-fetch "^2.1.1"
     loose-envify "^1.0.0"
     object-assign "^4.1.0"