Renderers can schedule commit-time effects for initial mount

The finalizeInitialChildren HostConfig method now utilizes a boolean return type. Renderers can return true to indicate that custom effects should be processed at commit-time after host components have been mounted. This type of work is marked using the existing Update flag.

A new HostConfig method, commitInitialEffects, has been added as well for performing this work.

Author: Brian Vaughn

src/renderers/art/ReactARTFiber.js

@@ -414,6 +414,10 @@ const ARTRenderer = ReactFiberReconciler({
     // Noop
   },
 
+  commitInitialEffects(instance, type, newProps) {
+    // Noop
+  },
+
   commitUpdate(instance, type, oldProps, newProps) {
     instance._applyProps(instance, newProps, oldProps);
   },
@@ -457,11 +461,7 @@ const ARTRenderer = ReactFiberReconciler({
   },
 
   finalizeInitialChildren(domElement, type, props) {
-    // Noop
-  },
-
-  focusHostComponent(instance) {
-    // Noop
+    return false;
   },
 
   insertBefore(parentInstance, child, beforeChild) {
@@ -507,10 +507,6 @@ const ARTRenderer = ReactFiberReconciler({
 
   scheduleDeferredCallback: window.requestIdleCallback,
 
-  shouldFocusHostComponent(type, props) {
-    return false;
-  },
-
   shouldSetTextContent(props) {
     return (
       typeof props.children === 'string' ||

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -96,6 +96,20 @@ function validateContainer(container) {
   }
 }
 
+function shouldAutoFocusHostComponent(
+  type : string,
+  props : Props,
+) : boolean {
+  switch (type) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea':
+      return !!(props : any).autoFocus;
+  }
+  return false;
+}
+
 var DOMRenderer = ReactFiberReconciler({
 
   getRootHostContext(rootContainerInstance : Container) : HostContext {
@@ -173,8 +187,9 @@ var DOMRenderer = ReactFiberReconciler({
     type : string,
     props : Props,
     rootContainerInstance : Container,
-  ) : void {
+  ) : boolean {
     setInitialProperties(domElement, type, props, rootContainerInstance);
+    return shouldAutoFocusHostComponent(type, props);
   },
 
   prepareUpdate(
@@ -197,6 +212,18 @@ var DOMRenderer = ReactFiberReconciler({
     return true;
   },
 
+  commitInitialEffects(
+    domElement : Instance,
+    type : string,
+    newProps : Props,
+    rootContainerInstance : Container,
+    internalInstanceHandle : Object,
+  ) : void {
+    if (shouldAutoFocusHostComponent(type, newProps)) {
+      (domElement : any).focus();
+    }
+  },
+
   commitUpdate(
     domElement : Instance,
     type : string,
@@ -262,26 +289,6 @@ var DOMRenderer = ReactFiberReconciler({
     parentInstance.removeChild(child);
   },
 
-  shouldFocusHostComponent(
-    type : string,
-    props : Props,
-  ) : boolean {
-    switch (type) {
-      case 'button':
-      case 'input':
-      case 'select':
-      case 'textarea':
-        return !!(props : any).autoFocus;
-    }
-    return false;
-  },
-
-  focusHostComponent(
-    domElement : Instance,
-  ) : void {
-    (domElement : any).focus();
-  },
-
   scheduleAnimationCallback: window.requestAnimationFrame,
 
   scheduleDeferredCallback: window.requestIdleCallback,

src/renderers/native/ReactNativeFiber.js

@@ -110,6 +110,16 @@ const NativeRenderer = ReactFiberReconciler({
     );
   },
 
+  commitInitialEffects(
+    instance : Instance,
+    type : string,
+    newProps : Props,
+    rootContainerInstance : Object,
+    internalInstanceHandle : Object
+  ) : void {
+    // Noop
+  },
+
   commitUpdate(
     instance : Instance,
     type : string,
@@ -197,7 +207,7 @@ const NativeRenderer = ReactFiberReconciler({
     type : string,
     props : Props,
     rootContainerInstance : Container,
-  ) : void {
+  ) : boolean {
     // Map from child objects to native tags.
     // Either way we need to pass a copy of the Array to prevent it from being frozen.
     const nativeTags = parentInstance._children.map(
@@ -210,6 +220,8 @@ const NativeRenderer = ReactFiberReconciler({
       parentInstance._nativeTag, // containerTag
       nativeTags // reactTags
     );
+
+    return false;
   },
 
   focusHostComponent(instance : Instance) : void {
@@ -326,10 +338,6 @@ const NativeRenderer = ReactFiberReconciler({
 
   scheduleDeferredCallback: global.requestIdleCallback,
 
-  shouldFocusHostComponent(type : string, props : Props) : boolean {
-    return false;
-  },
-
   shouldSetTextContent(props : Props) : boolean {
     // TODO (bvaughn) Revisit this decision.
     // Always returning false simplifies the createInstance() implementation,

src/renderers/noop/ReactNoop.js

@@ -70,14 +70,18 @@ var NoopRenderer = ReactFiberReconciler({
     parentInstance.children.push(child);
   },
 
-  finalizeInitialChildren(domElement : Instance, type : string, props : Props) : void {
-    // Noop
+  finalizeInitialChildren(domElement : Instance, type : string, props : Props) : boolean {
+    return false;
   },
 
   prepareUpdate(instance : Instance, type : string, oldProps : Props, newProps : Props) : boolean {
     return true;
   },
 
+  commitInitialEffects(instance : Instance, type : string, newProps : Props) : void {
+    // Noop
+  },
+
   commitUpdate(instance : Instance, type : string, oldProps : Props, newProps : Props) : void {
     instance.prop = newProps.prop;
   },
@@ -165,13 +169,6 @@ var NoopRenderer = ReactFiberReconciler({
   resetAfterCommit() : void {
   },
 
-  shouldFocusHostComponent(type : string, props : Props) : boolean {
-    return false;
-  },
-
-  focusHostComponent(instance : Instance) : void {
-  },
-
 });
 
 var rootContainers = new Map();

src/renderers/shared/fiber/ReactFiberCompleteWork.js

@@ -39,7 +39,6 @@ var {
   Fragment,
 } = ReactTypeOfWork;
 var {
-  Focus,
   Update,
 } = ReactTypeOfSideEffect;
 
@@ -57,7 +56,6 @@ module.exports = function<T, P, I, TI, C, CX>(
     appendInitialChild,
     finalizeInitialChildren,
     prepareUpdate,
-    shouldFocusHostComponent,
   } = config;
 
   const {
@@ -242,15 +240,14 @@ module.exports = function<T, P, I, TI, C, CX>(
             workInProgress
           );
 
-          // Certain renderers (eg DOM) support focusable components.
-          // It is not safe to focus components until they have been mounted though.
-          // For now we should just mark them for later work.
-          if (shouldFocusHostComponent(type, newProps)) {
-            workInProgress.effectTag |= Focus;
-          }
-
           appendAllChildren(instance, workInProgress);
-          finalizeInitialChildren(instance, type, newProps, rootContainerInstance);
+
+          // Certain renderers require commit-time effects for initial mount.
+          // (eg DOM renderer supports auto-focus for certain elements).
+          // Make sure such renderers get scheduled for later work.
+          if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance)) {
+            workInProgress.effectTag |= Update;
+          }
 
           workInProgress.stateNode = instance;
           if (workInProgress.ref) {

src/renderers/shared/fiber/ReactFiberReconciler.js

@@ -50,10 +50,11 @@ export type HostConfig<T, P, I, TI, C, CX> = {
 
   createInstance(type : T, props : P, rootContainerInstance : C, hostContext : CX, internalInstanceHandle : OpaqueNode) : I,
   appendInitialChild(parentInstance : I, child : I | TI) : void,
-  finalizeInitialChildren(parentInstance : I, type : T, props : P, rootContainerInstance : C) : void,
+  finalizeInitialChildren(parentInstance : I, type : T, props : P, rootContainerInstance : C) : boolean,
 
   prepareUpdate(instance : I, type : T, oldProps : P, newProps : P, hostContext : CX) : boolean,
   commitUpdate(instance : I, type : T, oldProps : P, newProps : P, rootContainerInstance : C, internalInstanceHandle : OpaqueNode) : void,
+  commitInitialEffects(instance : I, type : T, newProps : P, rootContainerInstance : C, internalInstanceHandle : OpaqueNode) : void,
 
   shouldSetTextContent(props : P) : boolean,
   resetTextContent(instance : I) : void,
@@ -72,9 +73,6 @@ export type HostConfig<T, P, I, TI, C, CX> = {
   resetAfterCommit() : void,
 
   useSyncScheduling ?: boolean,
-
-  shouldFocusHostComponent(type : T, props : P) : boolean,
-  focusHostComponent(instance : I) : void,
 };
 
 export type Reconciler<C, I, TI> = {

src/renderers/shared/fiber/ReactFiberScheduler.js

@@ -41,7 +41,6 @@ var {
 } = require('ReactPriorityLevel');
 
 var {
-  Focus,
   NoEffect,
   Placement,
   Update,
@@ -76,7 +75,12 @@ var timeHeuristicForUnitOfWork = 1;
 
 module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C, CX>) {
   const hostContext = ReactFiberHostContext(config);
-  const { popHostContainer, popHostContext, resetHostContainer } = hostContext;
+  const {
+    getRootHostContainer,
+    popHostContainer,
+    popHostContext,
+    resetHostContainer,
+  } = hostContext;
   const { beginWork, beginFailedWork } = ReactFiberBeginWork(
     config,
     hostContext,
@@ -96,7 +100,7 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C
     useSyncScheduling,
     prepareForCommit,
     resetAfterCommit,
-    focusHostComponent,
+    commitInitialEffects,
   } = config;
 
   // The priority level to use when scheduling an update.
@@ -285,12 +289,23 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C
     }
   }
 
-  function commitAllLifeCycles() {
+  function commitAllLifeCyclesAndApplyInitialEffects() {
     while (nextEffect) {
       const current = nextEffect.alternate;
 
-      if (nextEffect.effectTag & Focus) {
-        focusHostComponent(nextEffect.stateNode);
+      // Renderers may schedule work to be done after host components are mounted
+      // (eg DOM renderer may schedule auto-focus for inputs and form controls).
+      // These effects should only be committed when components are first mounted,
+      // aka when there is no current/alternate.
+      if (
+        !current &&
+        nextEffect.effectTag & Update
+      ) {
+        const type = nextEffect.type;
+        const props = nextEffect.memoizedProps;
+        const instance : I = nextEffect.stateNode;
+        const rootContainerInstance = getRootHostContainer();
+        commitInitialEffects(instance, type, props, rootContainerInstance, nextEffect);
       }
 
       // Use Task priority for lifecycle updates
@@ -378,11 +393,11 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C
     // In the second pass we'll perform all life-cycles and ref callbacks.
     // Life-cycles happen as a separate pass so that all placements, updates,
     // and deletions in the entire tree have already been invoked.
-    // This pass also triggers focus since components must be mounted first.
+    // This pass also triggers any renderer-specific initial effects.
     nextEffect = firstEffect;
     while (nextEffect) {
       try {
-        commitAllLifeCycles(finishedWork, nextEffect);
+        commitAllLifeCyclesAndApplyInitialEffects(finishedWork, nextEffect);
       } catch (error) {
         if (!nextEffect) {
           throw new Error('Should have nextEffect.');

src/renderers/shared/fiber/ReactTypeOfSideEffect.js

@@ -12,16 +12,15 @@
 
 'use strict';
 
-export type TypeOfSideEffect = 0 | 1 | 2 | 3 | 4 | 8 | 16 | 32 | 64;
+export type TypeOfSideEffect = 0 | 1 | 2 | 3 | 4 | 8 | 16 | 32;
 
 module.exports = {
-  NoEffect: 0,                                // 0b0000000
-  Placement: 1,                               // 0b0000001
-  Update: 2,                                  // 0b0000010
-  PlacementAndUpdate: 3,                      // 0b0000011
-  Deletion: 4,                                // 0b0000100
-  ContentReset: 8,                            // 0b0001000
-  Callback: 16,                               // 0b0010000
-  Focus: 32,                                  // 0b0100000
-  Err: 64,                                    // 0b1000000
+  NoEffect: 0,                                // 0b000000
+  Placement: 1,                               // 0b000001
+  Update: 2,                                  // 0b000010
+  PlacementAndUpdate: 3,                      // 0b000011
+  Deletion: 4,                                // 0b000100
+  ContentReset: 8,                            // 0b001000
+  Callback: 16,                               // 0b010000
+  Err: 32,                                    // 0b100000
 };