Change how to signal React components for optimization

Summary: Release notes: none Currently, you register a React component tree with `__registerReactComponent(component)`. This PR changes this global to `__optimizeReactComponentTree(rootComponent, config)`. Notice it now supports two arguments `rootComponent` and `config` – although config is optional. This global now also returns the original component passed in, so it can be added to existing codebase without having to break logic flow. This config argument allows the user to define how that React component tree will be optimized. More work will be added to this in upcoming PRs, but for now this PR is just a quick rename plus small refactor of the Prepack global. I've also had to rename the global in all tests. I've also added some doc as to how all this works: https://github.com/facebook/prepack/wiki/React-Compiler Closes https://github.com/facebook/prepack/pull/1527 Differential Revision: D7149728 Pulled By: trueadm fbshipit-source-id: 8d04d8dec8c0a03a6ccdb9587884bf6375010203
2024-10-26 15:20:18 +03:00 · 2018-03-04 02:17:56 -08:00 · 2018-03-04 02:17:56 -08:00 · afb0a9e9cb
commit afb0a9e9cb
parent 7b1d113c17
79 changed files with 270 additions and 198 deletions
--- a/src/intrinsics/prepack/global.js
+++ b/src/intrinsics/prepack/global.js
@ -130,24 +130,28 @@ export default function(realm: Realm): void {
  });

  if (realm.react.enabled) {
-    global.$DefineOwnProperty("__reactComponentRoots", {
-      value: new ObjectValue(realm, realm.intrinsics.ObjectPrototype, "__reactComponentRoots", true),
+    global.$DefineOwnProperty("__reactComponentTrees", {
+      value: new ObjectValue(realm, realm.intrinsics.ObjectPrototype, "__reactComponentTrees", true),
      writable: true,
      enumerable: false,
      configurable: true,
    });
    let reactComponentRootUid = 0;
-    // this is almost a copy of the additionalFunctions code above
-    global.$DefineOwnProperty("__registerReactComponentRoot", {
+    global.$DefineOwnProperty("__optimizeReactComponentTree", {
      value: new NativeFunctionValue(
        realm,
-        "global.__registerReactComponentRoot",
-        "__registerReactComponentRoot",
+        "global.__optimizeReactComponentTree",
+        "__optimizeReactComponentTree",
        0,
-        (context, [value]) => {
-          if (!(value instanceof ECMAScriptSourceFunctionValue || valueIsKnownReactAbstraction(realm, value))) {
+        (context, [component, config]) => {
+          let hasValidComponent =
+            component instanceof ECMAScriptSourceFunctionValue || valueIsKnownReactAbstraction(realm, component);
+          let hasValidConfig =
+            config instanceof ObjectValue || config === realm.intrinsics.undefined || config === undefined;
+
+          if (!hasValidComponent || !hasValidConfig) {
            let diagnostic = new CompilerDiagnostic(
-              "a value has been passed to __registerReactComponentRoot() that is not a function value or a known React abstract value",
+              "__optimizeReactComponentTree(rootComponent, config) has been called with invalid arguments",
              realm.currentLocation,
              "PP0024",
              "FatalError"
@ -155,14 +159,18 @@ export default function(realm: Realm): void {
            realm.handleError(diagnostic);
            if (realm.handleError(diagnostic) === "Fail") throw new FatalError();
          }
+          let reactComponentTree = new ObjectValue(realm, realm.intrinsics.ObjectPrototype);
+          reactComponentTree.$Set("rootComponent", component, reactComponentTree);
+          reactComponentTree.$Set("config", config || realm.intrinsics.undefined, reactComponentTree);
+
          realm.assignToGlobal(
            t.memberExpression(
-              t.memberExpression(t.identifier("global"), t.identifier("__reactComponentRoots")),
+              t.memberExpression(t.identifier("global"), t.identifier("__reactComponentTrees")),
              t.identifier("" + reactComponentRootUid++)
            ),
-            value
+            reactComponentTree
          );
-          return realm.intrinsics.undefined;
+          return component;
        }
      ),
      writable: true,
--- a/src/react/reconcilation.js
+++ b/src/react/reconcilation.js
@ -54,7 +54,7 @@ import {
 import { ExpectedBailOut, SimpleClassBailOut, NewComponentTreeBranch } from "./errors.js";
 import { Completion } from "../completions.js";
 import { Logger } from "../utils/logger.js";
-import type { ClassComponentMetadata } from "../types.js";
+import type { ClassComponentMetadata, ReactComponentTreeConfig } from "../types.js";

 type RenderStrategy = "NORMAL" | "FRAGMENT" | "RELAY_QUERY_RENDERER";

@ -77,7 +77,8 @@ export class Reconciler {
    realm: Realm,
    moduleTracer: ModuleTracer,
    statistics: ReactStatistics,
-    reactSerializerState: ReactSerializerState
+    reactSerializerState: ReactSerializerState,
+    componentTreeConfig: ReactComponentTreeConfig
  ) {
    this.realm = realm;
    this.moduleTracer = moduleTracer;
@ -86,6 +87,7 @@ export class Reconciler {
    this.logger = moduleTracer.modules.logger;
    this.componentTreeState = this._createComponentTreeState();
    this.alreadyEvaluatedRootNodes = new Map();
+    this.componentTreeConfig = componentTreeConfig;
  }

  realm: Realm;
@ -95,6 +97,7 @@ export class Reconciler {
  logger: Logger;
  componentTreeState: ComponentTreeState;
  alreadyEvaluatedRootNodes: Map<ECMAScriptSourceFunctionValue, ReactEvaluatedNode>;
+  componentTreeConfig: ReactComponentTreeConfig;

  render(
    componentType: ECMAScriptSourceFunctionValue,
@ -132,7 +135,7 @@ export class Reconciler {
        if (!isRoot) {
          this.logger.logWarning(
            componentType,
-            `__registerReactComponentRoot() React component tree (branch) failed due to - ${error.message}`
+            `__optimizeReactComponentTree() React component tree (branch) failed due to - ${error.message}`
          );
          return this.realm.intrinsics.undefined;
        }
@ -143,7 +146,7 @@ export class Reconciler {
          throw error;
        } else if (error instanceof ExpectedBailOut) {
          let diagnostic = new CompilerDiagnostic(
-            `__registerReactComponentRoot() React component tree (root) failed due to - ${error.message}`,
+            `__optimizeReactComponentTree() React component tree (root) failed due to - ${error.message}`,
            this.realm.currentLocation,
            "PP0020",
            "FatalError"
--- a/src/react/utils.js
+++ b/src/react/utils.js
@ -23,10 +23,12 @@ import {
  StringValue,
  ArrayValue,
  ECMAScriptSourceFunctionValue,
+  UndefinedValue,
+  BooleanValue,
 } from "../values/index.js";
 import type { BabelTraversePath } from "babel-traverse";
 import { Generator } from "../utils/generator.js";
-import type { Descriptor, ReactHint, PropertyBinding } from "../types";
+import type { Descriptor, ReactHint, PropertyBinding, ReactComponentTreeConfig } from "../types";
 import { Get, cloneDescriptor } from "../methods/index.js";
 import { computeBinary } from "../evaluators/BinaryExpression.js";
 import type { ReactSerializerState, AdditionalFunctionEffects, ReactEvaluatedNode } from "../serializer/types.js";
@ -35,7 +37,7 @@ import { Create, Properties, Environment } from "../singletons.js";
 import traverse from "babel-traverse";
 import * as t from "babel-types";
 import type { BabelNodeStatement } from "babel-types";
-import { FatalError } from "../errors.js";
+import { CompilerDiagnostic, FatalError } from "../errors.js";
 import { To } from "../singletons.js";
 import AbstractValue from "../values/AbstractValue";

@ -704,3 +706,39 @@ export function getComponentName(
  }
  return "Unknown";
 }
+
+export function convertConfigObjectToReactComponentTreeConfig(
+  realm: Realm,
+  config: ObjectValue | UndefinedValue
+): ReactComponentTreeConfig {
+  // defaults
+  let serverSideRenderOnly = false;
+
+  if (!(config instanceof UndefinedValue)) {
+    for (let [key] of config.properties) {
+      let propValue = getProperty(realm, config, key);
+      if (propValue instanceof StringValue || propValue instanceof NumberValue || propValue instanceof BooleanValue) {
+        let value = propValue.value;
+
+        // boolean options
+        if (typeof value === "boolean") {
+          if (key === serverSideRenderOnly) {
+            serverSideRenderOnly = value;
+          }
+        }
+      } else {
+        let diagnostic = new CompilerDiagnostic(
+          "__optimizeReactComponentTree(rootComponent, config) has been called with invalid arguments",
+          realm.currentLocation,
+          "PP0024",
+          "FatalError"
+        );
+        realm.handleError(diagnostic);
+        if (realm.handleError(diagnostic) === "Fail") throw new FatalError();
+      }
+    }
+  }
+  return {
+    serverSideRenderOnly,
+  };
+}
--- a/src/serializer/functions.js
+++ b/src/serializer/functions.js
@ -14,8 +14,7 @@ import { Completion, ThrowCompletion } from "../completions.js";
 import { CompilerDiagnostic, FatalError } from "../errors.js";
 import invariant from "../invariant.js";
 import { type Effects, type PropertyBindings, Realm } from "../realm.js";
-import type { AdditionalFunctionEffects } from "./types.js";
-import type { PropertyBinding } from "../types.js";
+import type { PropertyBinding, ReactComponentTreeConfig } from "../types.js";
 import { ignoreErrorsIn } from "../utils/errors.js";
 import {
  Value,
@ -24,11 +23,12 @@ import {
  ObjectValue,
  AbstractValue,
  ECMAScriptSourceFunctionValue,
+  UndefinedValue,
 } from "../values/index.js";
 import { Get } from "../methods/index.js";
 import { ModuleTracer } from "../utils/modules.js";
 import buildTemplate from "babel-template";
-import { ReactStatistics, type ReactSerializerState } from "./types";
+import { ReactStatistics, type ReactSerializerState, type AdditionalFunctionEffects } from "./types";
 import { Reconciler, type ComponentTreeState } from "../react/reconcilation.js";
 import {
  valueIsClassComponent,
@ -40,6 +40,7 @@ import {
  evaluateComponentTreeBranch,
  createReactEvaluatedNode,
  getComponentName,
+  convertConfigObjectToReactComponentTreeConfig,
 } from "../react/utils.js";
 import * as t from "babel-types";
 import { createAbstractArgument } from "../intrinsics/prepack/utils.js";
@ -90,8 +91,11 @@ export class Functions {
    return additionalFunctions;
  }

-  __generateAdditionalFunctions(globalKey: string) {
-    let recordedAdditionalFunctions: Map<ECMAScriptSourceFunctionValue | AbstractValue, string> = new Map();
+  __generateAdditionalFunctionsMap(globalKey: string) {
+    let recordedAdditionalFunctions: Map<
+      ECMAScriptSourceFunctionValue | AbstractValue,
+      { funcId: string, config?: ReactComponentTreeConfig }
+    > = new Map();
    let realm = this.realm;
    let globalRecordedAdditionalFunctionsMap = this.moduleTracer.modules.logger.tryQuery(
      () => Get(realm, realm.$GlobalObject, globalKey),
@ -103,25 +107,39 @@ export class Functions {
      if (property) {
        let value = property.descriptor && property.descriptor.value;

-        if (
-          !(
-            value instanceof FunctionValue ||
-            (value instanceof AbstractValue && valueIsKnownReactAbstraction(this.realm, value))
-          )
-        ) {
-          invariant(value instanceof AbstractValue);
-          realm.handleError(
-            new CompilerDiagnostic(
-              `Additional Function Value ${funcId} is an AbstractValue which is not allowed (unless a React known abstract)`,
-              undefined,
-              "PP0001",
-              "FatalError"
-            )
-          );
-          throw new FatalError("Additional Function values cannot be AbstractValues");
+        if (value instanceof ECMAScriptSourceFunctionValue) {
+          // additional function logic
+          recordedAdditionalFunctions.set(value, { funcId });
+          continue;
+        } else if (value instanceof ObjectValue) {
+          // React component tree logic
+          let config = Get(realm, value, "config");
+          let rootComponent = Get(realm, value, "rootComponent");
+          let validConfig = config instanceof ObjectValue || config === realm.intrinsics.undefined;
+          let validRootComponent =
+            rootComponent instanceof ECMAScriptSourceFunctionValue ||
+            (rootComponent instanceof AbstractValue && valueIsKnownReactAbstraction(this.realm, rootComponent));
+
+          if (validConfig && validRootComponent) {
+            recordedAdditionalFunctions.set(((rootComponent: any): ECMAScriptSourceFunctionValue | AbstractValue), {
+              funcId,
+              config: convertConfigObjectToReactComponentTreeConfig(
+                realm,
+                ((config: any): ObjectValue | UndefinedValue)
+              ),
+            });
+          }
+          continue;
        }
-        invariant(value instanceof AbstractValue || value instanceof ECMAScriptSourceFunctionValue);
-        recordedAdditionalFunctions.set(value, funcId);
+        realm.handleError(
+          new CompilerDiagnostic(
+            `Additional Function Value ${funcId} is an invalid value`,
+            undefined,
+            "PP0001",
+            "FatalError"
+          )
+        );
+        throw new FatalError("invalidf Additional Function value");
      }
    }
    return recordedAdditionalFunctions;
@ -188,11 +206,12 @@ export class Functions {
  }

  checkRootReactComponentTrees(statistics: ReactStatistics, react: ReactSerializerState): void {
-    let recordedReactRootValues = this.__generateAdditionalFunctions("__reactComponentRoots");
+    let recordedReactRootValues = this.__generateAdditionalFunctionsMap("__reactComponentTrees");
    // Get write effects of the components
-    for (let [rootValue] of recordedReactRootValues) {
-      let reconciler = new Reconciler(this.realm, this.moduleTracer, statistics, react);
-      let componentType = getComponentTypeFromRootValue(this.realm, rootValue);
+    for (let [componentRoot, { config }] of recordedReactRootValues) {
+      invariant(config);
+      let reconciler = new Reconciler(this.realm, this.moduleTracer, statistics, react, config);
+      let componentType = getComponentTypeFromRootValue(this.realm, componentRoot);
      let evaluatedRootNode = createReactEvaluatedNode("ROOT", getComponentName(this.realm, componentType));
      statistics.evaluatedRootNodes.push(evaluatedRootNode);
      if (reconciler.hasEvaluatedRootNode(componentType, evaluatedRootNode)) {
@ -225,12 +244,12 @@ export class Functions {
  }

  _generateAdditionalFunctionCallsFromDirective(): Array<[FunctionValue, BabelNodeCallExpression]> {
-    let recordedAdditionalFunctions = this.__generateAdditionalFunctions("__additionalFunctions");
+    let recordedAdditionalFunctions = this.__generateAdditionalFunctionsMap("__additionalFunctions");

    // The additional functions we registered at runtime are recorded at:
    // global.__additionalFunctions.id
    let calls = [];
-    for (let [funcValue, funcId] of recordedAdditionalFunctions) {
+    for (let [funcValue, { funcId }] of recordedAdditionalFunctions) {
      // TODO #987: Make Additional Functions work with arguments
      invariant(funcValue instanceof FunctionValue);
      calls.push([
@ -284,7 +303,7 @@ export class Functions {

  checkThatFunctionsAreIndependent() {
    let inputFunctions = this._generateAdditionalFunctionCallsFromInput();
-    let recordedAdditionalFunctions = this.__generateAdditionalFunctions("__additionalFunctions");
+    let recordedAdditionalFunctions = this.__generateAdditionalFunctionsMap("__additionalFunctions");
    let additionalFunctions = inputFunctions.concat([...recordedAdditionalFunctions.keys()]);

    for (let funcValue of additionalFunctions) {
--- a/src/types.js
+++ b/src/types.js
@ -326,6 +326,10 @@ export type ClassComponentMetadata = {

 export type ReactHint = {| object: ObjectValue, propertyName: string, args: Array<Value> |};

+export type ReactComponentTreeConfig = {
+  serverSideRenderOnly: boolean,
+};
+
 export type DebugServerType = {
  checkForActions: BabelNode => void,
  shutdown: () => void,
--- a/test/react/class-components/classes-with-state.js
+++ b/test/react/class-components/classes-with-state.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['render with class with state', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/complex-class-into-functional-root.js
+++ b/test/react/class-components/complex-class-into-functional-root.js
@ -29,8 +29,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/complex-class-into-functional-root2.js
+++ b/test/react/class-components/complex-class-into-functional-root2.js
@ -42,8 +42,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/complex-class-into-functional-root3.js
+++ b/test/react/class-components/complex-class-into-functional-root3.js
@ -53,8 +53,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/complex-class-into-functional-root4.js
+++ b/test/react/class-components/complex-class-into-functional-root4.js
@ -33,8 +33,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/complex-class-into-functional-root5.js
+++ b/test/react/class-components/complex-class-into-functional-root5.js
@ -43,8 +43,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/inheritance-chain.js
+++ b/test/react/class-components/inheritance-chain.js
@ -36,8 +36,8 @@ App.getTrials = function(renderer, Root) {
  return [['inheritance chain', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/simple-classes-2.js
+++ b/test/react/class-components/simple-classes-2.js
@ -13,8 +13,8 @@ App.getTrials = function(renderer, Root) {
  return [['render simple classes', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/simple-classes-3.js
+++ b/test/react/class-components/simple-classes-3.js
@ -28,8 +28,8 @@ App.getTrials = function(renderer, Root) {
  return [['render simple classes', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/class-components/simple-classes.js
+++ b/test/react/class-components/simple-classes.js
@ -40,8 +40,8 @@ var App = (function (superclass) {
  return App;
 }(React.Component));

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/factory-components/simple.js
+++ b/test/react/factory-components/simple.js
@ -15,8 +15,8 @@ FactoryComponent.getTrials = function(renderer, Root) {
  return [['render simple factory classes', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(FactoryComponent);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(FactoryComponent);
 }

 module.exports = FactoryComponent;
--- a/test/react/factory-components/simple2.js
+++ b/test/react/factory-components/simple2.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['render simple factory classes #2', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/additional-function-regression.js
+++ b/test/react/functional-components/additional-function-regression.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/array-twice.js
+++ b/test/react/functional-components/array-twice.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['render array twice', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/circular-reference.js
+++ b/test/react/functional-components/circular-reference.js
@ -30,8 +30,8 @@ App.getTrials = function(renderer, Root) {
  return [['circular-reference', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/class-root-with-instance-vars-2.js
+++ b/test/react/functional-components/class-root-with-instance-vars-2.js
@ -38,8 +38,8 @@ var App = (function (superclass) {
  return App;
 }(React.Component));

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/class-root-with-instance-vars.js
+++ b/test/react/functional-components/class-root-with-instance-vars.js
@ -38,8 +38,8 @@ var App = (function (superclass) {
  return App;
 }(React.Component));

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/class-root-with-props.js
+++ b/test/react/functional-components/class-root-with-props.js
@ -33,8 +33,8 @@ var App = (function (superclass) {
  return App;
 }(React.Component));

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/class-root-with-refs.js
+++ b/test/react/functional-components/class-root-with-refs.js
@ -46,8 +46,8 @@ var App = (function (superclass) {
  return App;
 }(React.Component));

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/class-root-with-render-methods.js
+++ b/test/react/functional-components/class-root-with-render-methods.js
@ -36,8 +36,8 @@ var App = (function (superclass) {
  return App;
 }(React.Component));

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/class-root-with-state.js
+++ b/test/react/functional-components/class-root-with-state.js
@ -27,8 +27,8 @@ App.getTrials = function(renderer, Root) {
  return [['render with class root and props', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/class-root.js
+++ b/test/react/functional-components/class-root.js
@ -33,8 +33,8 @@ var App = (function (superclass) {
  return App;
 }(React.Component));

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/clone-element.js
+++ b/test/react/functional-components/clone-element.js
@ -37,8 +37,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/conditional.js
+++ b/test/react/functional-components/conditional.js
@ -22,8 +22,8 @@ App.getTrials = function(renderer, Root) {
  return [['conditional render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/delete-element-prop-key.js
+++ b/test/react/functional-components/delete-element-prop-key.js
@ -33,8 +33,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with delete on props key', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/dynamic-context.js
+++ b/test/react/functional-components/dynamic-context.js
@ -46,8 +46,8 @@ App.getTrials = function(renderer, Root) {
  return [['render with dynamic context access', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(Child);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(Child);
 }

 module.exports = App;
--- a/test/react/functional-components/dynamic-props.js
+++ b/test/react/functional-components/dynamic-props.js
@ -15,8 +15,8 @@ App.getTrials = function(renderer, Root) {
  return [['render with dynamic prop access', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/event-handlers.js
+++ b/test/react/functional-components/event-handlers.js
@ -20,8 +20,8 @@ App.getTrials = function(renderer, Root) {
  ];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/key-change-fragments.js
+++ b/test/react/functional-components/key-change-fragments.js
@ -62,8 +62,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/key-change.js
+++ b/test/react/functional-components/key-change.js
@ -64,8 +64,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/key-nesting-2.js
+++ b/test/react/functional-components/key-nesting-2.js
@ -24,8 +24,8 @@ App.getTrials = function(renderer, Root) {
  return [['key nesting 2', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/key-nesting-3.js
+++ b/test/react/functional-components/key-nesting-3.js
@ -26,8 +26,8 @@ App.getTrials = function(renderer, Root) {
  return [['key nesting 3', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/key-nesting.js
+++ b/test/react/functional-components/key-nesting.js
@ -71,8 +71,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/key-not-change-fragments.js
+++ b/test/react/functional-components/key-not-change-fragments.js
@ -62,8 +62,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/nested-array-children.js
+++ b/test/react/functional-components/nested-array-children.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['render nested array children', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/return-text.js
+++ b/test/react/functional-components/return-text.js
@ -22,8 +22,8 @@ App.getTrials = function(renderer, Root) {
  return [['render text', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/return-undefined.js
+++ b/test/react/functional-components/return-undefined.js
@ -23,8 +23,8 @@ App.getTrials = function(renderer, Root) {
  return [['error rendering', didError]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-2.js
+++ b/test/react/functional-components/simple-2.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-3.js
+++ b/test/react/functional-components/simple-3.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-4.js
+++ b/test/react/functional-components/simple-4.js
@ -23,8 +23,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render 4', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-5.js
+++ b/test/react/functional-components/simple-5.js
@ -25,12 +25,12 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(Child);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(Child);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-6.js
+++ b/test/react/functional-components/simple-6.js
@ -13,8 +13,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-7.js
+++ b/test/react/functional-components/simple-7.js
@ -13,8 +13,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-assign.js
+++ b/test/react/functional-components/simple-assign.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with object assign', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-assign2.js
+++ b/test/react/functional-components/simple-assign2.js
@ -23,8 +23,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with object assign', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-assign3.js
+++ b/test/react/functional-components/simple-assign3.js
@ -17,8 +17,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with object assign', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-assign4.js
+++ b/test/react/functional-components/simple-assign4.js
@ -15,8 +15,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with object assign', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-assign5.js
+++ b/test/react/functional-components/simple-assign5.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with object assign', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-children.js
+++ b/test/react/functional-components/simple-children.js
@ -21,8 +21,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple children', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-fragments.js
+++ b/test/react/functional-components/simple-fragments.js
@ -29,8 +29,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple fragments render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-refs.js
+++ b/test/react/functional-components/simple-refs.js
@ -34,8 +34,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-abstract-props.js
+++ b/test/react/functional-components/simple-with-abstract-props.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-jsx-spread.js
+++ b/test/react/functional-components/simple-with-jsx-spread.js
@ -23,8 +23,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with jsx spread', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-jsx-spread2.js
+++ b/test/react/functional-components/simple-with-jsx-spread2.js
@ -23,8 +23,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with jsx spread 2', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-jsx-spread3.js
+++ b/test/react/functional-components/simple-with-jsx-spread3.js
@ -19,8 +19,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with jsx spread 3', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-jsx-spread4.js
+++ b/test/react/functional-components/simple-with-jsx-spread4.js
@ -17,8 +17,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with jsx spread 4', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-jsx-spread5.js
+++ b/test/react/functional-components/simple-with-jsx-spread5.js
@ -12,8 +12,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with jsx spread 5', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-jsx-spread6.js
+++ b/test/react/functional-components/simple-with-jsx-spread6.js
@ -10,8 +10,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render with jsx spread 6', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple-with-unary.js
+++ b/test/react/functional-components/simple-with-unary.js
@ -27,8 +27,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/simple.js
+++ b/test/react/functional-components/simple.js
@ -29,8 +29,8 @@ App.getTrials = function(renderer, Root) {
  return [['simple render', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/type-change.js
+++ b/test/react/functional-components/type-change.js
@ -72,8 +72,8 @@ App.getTrials = function(renderer, Root) {
  return results;
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/functional-components/type-same.js
+++ b/test/react/functional-components/type-same.js
@ -16,8 +16,8 @@ App.getTrials = function(renderer, Root) {
  return [['no added keys to child components', childKey]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/mocks/fb1.js
+++ b/test/react/mocks/fb1.js
@ -32,8 +32,8 @@ module.exports = this.__evaluatePureFunction(() => {
    return [['fb1 mocks', renderer.toJSON()]];
  };

-  if (this.__registerReactComponentRoot) {
-    __registerReactComponentRoot(App);
+  if (this.__optimizeReactComponentTree) {
+    __optimizeReactComponentTree(App);
  }

  return App;
--- a/test/react/mocks/fb10.js
+++ b/test/react/mocks/fb10.js
@ -73,8 +73,8 @@ module.exports = this.__evaluatePureFunction(() => {
    return [['simple render', renderer.toJSON()]];
  };

-  if (this.__registerReactComponentRoot) {
-    __registerReactComponentRoot(App);
+  if (this.__optimizeReactComponentTree) {
+    __optimizeReactComponentTree(App);
  }

  return App;
--- a/test/react/mocks/fb11.js
+++ b/test/react/mocks/fb11.js
@ -83,8 +83,8 @@ module.exports = this.__evaluatePureFunction(() => {
    return [['simple render', renderer.toJSON()]];
  };

-  if (this.__registerReactComponentRoot) {
-    __registerReactComponentRoot(App);
+  if (this.__optimizeReactComponentTree) {
+    __optimizeReactComponentTree(App);
  }

  return App;
--- a/test/react/mocks/fb2.js
+++ b/test/react/mocks/fb2.js
@ -58,8 +58,8 @@ Hello.getTrials = function(renderer, Root) {
  return [['fb2 mocks', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(Hello);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(Hello);
 }

 module.exports = Hello;
--- a/test/react/mocks/fb7.js
+++ b/test/react/mocks/fb7.js
@ -38,8 +38,8 @@ module.exports = this.__evaluatePureFunction(() => {
    },
  })

-  if (this.__registerReactComponentRoot) {
-    __registerReactComponentRoot(WrappedApp);
+  if (this.__optimizeReactComponentTree) {
+    __optimizeReactComponentTree(WrappedApp);
  }

  // this is a mocked out relay mock for this test
--- a/test/react/mocks/fb8.js
+++ b/test/react/mocks/fb8.js
@ -42,8 +42,8 @@ module.exports = this.__evaluatePureFunction(() => {
    return <span>This contains a ReactRelay container:<WrappedApp /></span>;
  }

-  if (this.__registerReactComponentRoot) {
-    __registerReactComponentRoot(App);
+  if (this.__optimizeReactComponentTree) {
+    __optimizeReactComponentTree(App);
  }

  // this is a mocked out relay mock for this test
--- a/test/react/mocks/fb9.js
+++ b/test/react/mocks/fb9.js
@ -75,8 +75,8 @@ module.exports = this.__evaluatePureFunction(() => {
    return [['simple render', renderer.toJSON()]];
  };

-  if (this.__registerReactComponentRoot) {
-    __registerReactComponentRoot(App);
+  if (this.__optimizeReactComponentTree) {
+    __optimizeReactComponentTree(App);
  }

  return App;
--- a/test/react/mocks/hacker-news.js
+++ b/test/react/mocks/hacker-news.js
@ -212,8 +212,8 @@ module.exports = this.__evaluatePureFunction(() => {
    stories: PropTypes.array.isRequired,
  };

-  if (this.__registerReactComponentRoot) {
-  	__registerReactComponentRoot(App);
+  if (this.__optimizeReactComponentTree) {
+  	__optimizeReactComponentTree(App);
  }

  return App;
--- a/test/react/mocks/repl-example.js
+++ b/test/react/mocks/repl-example.js
@ -28,8 +28,8 @@ function Foo(props: {href: string}) {

 // this is a special Prepack function hook
 // that tells Prepack the root of a React component tree
-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(Foo);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(Foo);
 }

 window.Foo = Foo;
--- a/test/react/render-props/relay-query-renderer.js
+++ b/test/react/render-props/relay-query-renderer.js
@ -20,8 +20,8 @@ App.getTrials = function(renderer, Root) {
  return [['render props relay', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/render-props/relay-query-renderer2.js
+++ b/test/react/render-props/relay-query-renderer2.js
@ -20,8 +20,8 @@ App.getTrials = function(renderer, Root) {
  return [['render props relay', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;
--- a/test/react/render-props/relay-query-renderer3.js
+++ b/test/react/render-props/relay-query-renderer3.js
@ -32,8 +32,8 @@ App.getTrials = function(renderer, Root) {
  return [['render props relay', renderer.toJSON()]];
 };

-if (this.__registerReactComponentRoot) {
-  __registerReactComponentRoot(App);
+if (this.__optimizeReactComponentTree) {
+  __optimizeReactComponentTree(App);
 }

 module.exports = App;