Lazily initialize and cache constant JSX elements

packages/babel-plugin-transform-react-constant-elements/src/index.js

@@ -18,6 +18,19 @@ export default declare((api, options) => {
   // Element -> Target scope
   const HOISTED = new WeakMap();
 
+  function declares(
+    node: t.ThisExpression | t.Identifier | t.JSXIdentifier,
+    scope,
+  ) {
+    // Ideally this should always be a ThisExpression 🤷
+    if (t.isThisExpression(node) || t.isJSXIdentifier(node, { name: "this" })) {
+      const { path } = scope;
+      return path.isFunctionParent() && !path.isArrowFunctionExpression();
+    }
+
+    return scope.hasOwnBinding(node.name);
+  }
+
   const analyzer = {
     enter(path, state) {
       const stop = () => {
@@ -76,9 +89,9 @@ export default declare((api, options) => {
         stop();
       }
     },
-    ReferencedIdentifier(path, state) {
-      const { name } = path.node;
-      let scope = path.scope;
+    "ReferencedIdentifier|ThisExpression"(path, state) {
+      const { node } = path;
+      let { scope } = path;
       let targetScope;
 
       let isNestedScope = true;
@@ -131,7 +144,7 @@ export default declare((api, options) => {
         //  2. We are in an upper scope, so this declaration defines
         //     a new hoisting constraint. The targetScope variable
         //     refers to the current scope.
-        if (scope.hasOwnBinding(name)) break;
+        if (declares(node, scope)) break;
 
         scope = scope.parent;
       }

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js

@@ -1,6 +1,6 @@
-var _this$component;
-
 function render() {
+  var _this$component;
+
   this.component = "div";
   return () => _this$component || (_this$component = <this.component />);
 }

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js

@@ -1,7 +1,9 @@
-var _span, _this$subComponent;
+var _span;
 
 class Component extends React.Component {
   constructor(...args) {
+    var _this$subComponent;
+
     super(...args);
 
     this.subComponent = () => _span || (_span = <span>Sub Component</span>);