From 06c8964f94b7855cec984291628f02f3d859e8b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 00:09:31 +0100
Subject: [PATCH 01/12] Lazily initialize hoisted JSX elements

---
 .../src/index.js                              | 131 ++++++++++++++++--
 1 file changed, 117 insertions(+), 14 deletions(-)

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index 4d434bdc3aea..4db79dfada02 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/packages/babel-plugin-transform-react-constant-elements/src/index.js
@@ -1,5 +1,5 @@
 import { declare } from "@babel/helper-plugin-utils";
-import { types as t } from "@babel/core";
+import { types as t, template } from "@babel/core";
 
 export default declare((api, options) => {
   api.assertVersion(7);
@@ -15,9 +15,10 @@ export default declare((api, options) => {
     );
   }
 
-  const HOISTED = new WeakSet();
+  // Element -> Target scope
+  const HOISTED = new WeakMap();
 
-  const immutabilityVisitor = {
+  const analyzer = {
     enter(path, state) {
       const stop = () => {
         state.isImmutable = false;
@@ -75,6 +76,68 @@ export default declare((api, options) => {
         stop();
       }
     },
+    ReferencedIdentifier(path, state) {
+      const { name } = path.node;
+      let scope = path.scope;
+      let targetScope;
+
+      let isNestedScope = true;
+      let needsHoisting = true;
+
+      while (scope) {
+        // We cannot hoist outside of the previous hoisting target
+        // scope, so we return early and we don't update it.
+        if (scope === state.targetScope) return;
+
+        // When we hit the scope of our JSX element, we must start
+        // checking if they declare the binding of the current
+        // ReferencedIdentifier.
+        // We don't case about bindings declared in nested scopes,
+        // because the whole nested scope is hoisted alongside the
+        // JSX element so it doesn't impose any extra constraint.
+        if (scope === state.jsxScope) {
+          isNestedScope = false;
+        }
+
+        // If we are in an upper scope and hoisting to this scope has
+        // any benefit, we update the possible targetScope to the
+        // current one.
+        if (!isNestedScope && needsHoisting) {
+          targetScope = scope;
+        }
+
+        // When we start walking in upper scopes, avoid hoisting JSX
+        // elements until we hit a scope introduced by a function or
+        // loop.
+        // This is because hoisting from the inside to the outside
+        // of block or if statements doesn't give any performance
+        // benefit, and it just unnecessarily increases the code size.
+        if (scope === state.jsxScope) {
+          needsHoisting = false;
+        }
+        if (
+          !needsHoisting &&
+          (scope.path.isFunctionParent() || scope.path.isLoop())
+        ) {
+          needsHoisting = true;
+        }
+
+        // If the current scope declares the ReferencedIdentifier we
+        // are checking, we break out of this loop. There are two
+        // possible scenarios:
+        //  1. We are in a nested scope, this this declaration means
+        //     that this reference doesn't affect the target scope.
+        //     The targetScope variable is still undefined.
+        //  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;
+
+        scope = scope.parent;
+      }
+
+      if (targetScope) state.targetScope = targetScope;
+    },
   };
 
   return {
@@ -83,30 +146,70 @@ export default declare((api, options) => {
     visitor: {
       JSXElement(path) {
         if (HOISTED.has(path.node)) return;
-        HOISTED.add(path.node);
+        HOISTED.set(path.node, path.scope);
 
-        const state = { isImmutable: true };
+        const name = path.get("openingElement.name").node;
 
         // This transform takes the option `allowMutablePropsOnTags`, which is an array
         // of JSX tags to allow mutable props (such as objects, functions) on. Use sparingly
         // and only on tags you know will never modify their own props.
+        let mutablePropsAllowed = false;
         if (allowMutablePropsOnTags != null) {
           // Get the element's name. If it's a member expression, we use the last part of the path.
           // So the option ["FormattedMessage"] would match "Intl.FormattedMessage".
-          let namePath = path.get("openingElement.name");
-          while (namePath.isJSXMemberExpression()) {
-            namePath = namePath.get("property");
+          let lastSegment = name;
+          while (t.isJSXMemberExpression(lastSegment)) {
+            lastSegment = lastSegment.property;
           }
 
-          const elementName = namePath.node.name;
-          state.mutablePropsAllowed =
-            allowMutablePropsOnTags.indexOf(elementName) > -1;
+          const elementName = lastSegment.name;
+          mutablePropsAllowed = allowMutablePropsOnTags.includes(elementName);
         }
 
-        // Traverse all props passed to this element for immutability.
-        path.traverse(immutabilityVisitor, state);
+        // In order to avoid hoisting unnecessarily, we need to know which is
+        // the scope containing the current JSX element. If a parent of the
+        // current element has already been hoisted, we can consider its target
+        // scope as the base scope for the current element.
+        let jsxScope;
+        let current = path;
+        while (!jsxScope && current.parentPath.isJSXElement()) {
+          current = current.parentPath;
+          jsxScope = HOISTED.get(current.node);
+        }
+        jsxScope ??= path.scope;
+
+        const state = {
+          isImmutable: true,
+          mutablePropsAllowed,
+          jsxScope,
+          targetScope: null,
+        };
+
+        // Traverse all props passed to this element for immutability,
+        // and compute the target hoisting scope
+        path.traverse(analyzer, state);
+
+        if (!state.isImmutable) return;
+
+        // If we didn't find any hoisting constraint, we can hoist the current
+        // helement to the program scope.
+        const targetScope = state.targetScope ?? path.scope.getProgramParent();
+        HOISTED.set(path.node, targetScope);
+
+        // Only hoist if it would give us an advantage.
+        if (targetScope === jsxScope) return;
+
+        const id = path.scope.generateUidBasedOnNode(name);
+        targetScope.push({ id: t.identifier(id) });
+
+        let replacement = template.expression.ast`
+          ${t.identifier(id)} || (${t.identifier(id)} = ${path.node})
+        `;
+        if (path.parentPath.isJSXElement()) {
+          replacement = t.jsxExpressionContainer(replacement);
+        }
 
-        if (state.isImmutable) path.hoist();
+        path.replaceWith(replacement);
       },
     },
   };

From be0bef81abd0d6baa79ac96b9719ef3339d1eccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 00:10:09 +0100
Subject: [PATCH 02/12] Update `constant-elements` fixtures

---
 .../output.mjs                                | 14 ++++++--------
 .../output.js                                 | 19 +++++++++----------
 .../output.js                                 | 18 ++++++++----------
 .../output.mjs                                | 17 ++++++++---------
 .../constant-elements/children/output.js      |  4 ++--
 .../output.mjs                                | 14 +++++++++-----
 .../compound-assignment/output.mjs            | 10 ++++------
 .../constant-elements/constructor/output.js   |  6 +++---
 .../deep-constant-violation/output.js         |  8 +++-----
 .../deopt-mutable-complex/output.mjs          |  4 +++-
 .../deopt-mutable/output.mjs                  |  4 +++-
 .../dont-hoist-before-class/output.mjs        | 15 +++++++--------
 .../dont-hoist-before-declaration/output.js   | 12 +++++++-----
 .../output.js                                 |  7 +++----
 .../output.js                                 |  6 +++---
 .../dont-hoist-before-hoc/output.mjs          | 16 +++++++---------
 .../function-parameter/output.js              |  8 ++++----
 .../global-reference/output.js                |  4 ++--
 .../constant-elements/html-element/output.js  |  8 +++-----
 .../inline-elements/output.js                 | 11 +++++------
 .../inner-declaration/output.js               |  7 +++----
 .../constant-elements/issue-11686/output.mjs  | 16 ++++++++++++++++
 .../member-expression-constant/output.js      |  7 +++----
 .../member-expression-this/output.js          |  8 +++-----
 .../member-expression/output.js               |  8 +++-----
 .../constant-elements/param-and-var/output.js |  6 +++---
 .../parameter-destructure-multi/output.js     |  7 +++----
 .../parameter-destructure-rest/output.js      |  7 +++----
 .../parameter-destructure/output.js           |  7 +++----
 .../parameter-reference/output.js             |  4 ++--
 .../pure-expression-2/output.js               |  4 ++--
 .../pure-expression-3/output.js               |  7 +++----
 .../output.mjs                                | 11 +++++------
 .../pure-expression-whitelist/output.js       |  8 ++++----
 .../pure-expression/output.js                 |  4 ++--
 .../constant-elements/reassignment/output.js  |  7 +++----
 .../output.mjs                                |  6 +++---
 .../regression-node-type-export/output.mjs    |  6 +++---
 .../constant-elements/text-children/output.js |  8 ++++----
 .../fixtures/constant-elements/var/output.js  |  6 +++---
 40 files changed, 173 insertions(+), 176 deletions(-)
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/output.mjs

diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs
index 5f4d4762cf4f..ddfb74c704e0 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-2/output.mjs
@@ -1,17 +1,15 @@
-var _ref = <div>child</div>;
+var _div, _div2;
 
 const AppItem = () => {
-  return _ref;
+  return _div || (_div = <div>child</div>);
 };
 
-var _ref2 = <div>
-        <p>Parent</p>
-        <AppItem />
-      </div>;
-
 export default class App extends React.Component {
   render() {
-    return _ref2;
+    return _div2 || (_div2 = <div>
+        <p>Parent</p>
+        <AppItem />
+      </div>);
   }
 
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js
index 5b5fdfbf7731..fa1301272b02 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-3/output.js
@@ -1,20 +1,19 @@
-var _ref2 = <div>child</div>;
-
-var _ref3 = <p>Parent</p>;
+var _p, _div2;
 
 (function () {
+  var _div;
+
   class App extends React.Component {
     render() {
-      return _ref;
+      return _div || (_div = <div>
+          {_p || (_p = <p>Parent</p>)}
+          <AppItem />
+        </div>);
     }
 
   }
 
   const AppItem = () => {
-    return _ref2;
-  },
-        _ref = <div>
-          {_ref3}
-          <AppItem />
-        </div>;
+    return _div2 || (_div2 = <div>child</div>);
+  };
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js
index 7088d18dca32..cfb17af7a127 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope-4/output.js
@@ -1,20 +1,18 @@
-var _ref = <div>child</div>;
-
-var _ref3 = <p>Parent</p>;
+var _div, _p;
 
 (function () {
+  var _div2;
+
   const AppItem = () => {
-    return _ref;
+    return _div || (_div = <div>child</div>);
   };
 
-  var _ref2 = <div>
-          {_ref3}
-          <AppItem />
-        </div>;
-
   class App extends React.Component {
     render() {
-      return _ref2;
+      return _div2 || (_div2 = <div>
+          {_p || (_p = <p>Parent</p>)}
+          <AppItem />
+        </div>);
     }
 
   }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs
index e7f8ea322a44..9228f389c37e 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/append-to-end-when-declared-in-scope/output.mjs
@@ -1,16 +1,15 @@
+var _div, _div2;
+
 export default class App extends React.Component {
   render() {
-    return _ref;
+    return _div || (_div = <div>
+        <p>Parent</p>
+        <AppItem />
+      </div>);
   }
 
 }
 
-var _ref2 = <div>child</div>;
-
 const AppItem = () => {
-  return _ref2;
-},
-      _ref = <div>
-        <p>Parent</p>
-        <AppItem />
-      </div>;
+  return _div2 || (_div2 = <div>child</div>);
+};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js
index 9f725b28e808..5d9fb2f0242e 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/children/output.js
@@ -1,9 +1,9 @@
-var _ref = <span />;
+var _span;
 
 var Foo = React.createClass({
   render: function () {
     return <div className={this.props.className}>
-      {_ref}
+      {_span || (_span = <span />)}
     </div>;
   }
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs
index cb11c5579d5b..2876e603f127 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/class-assign-unreferenced-param-deopt/output.mjs
@@ -1,6 +1,6 @@
-import React from 'react'; // Regression test for https://github.com/babel/babel/issues/5552
+var _div2;
 
-var _ref = <div />;
+import React from 'react'; // Regression test for https://github.com/babel/babel/issues/5552
 
 class BugReport extends React.Component {
   constructor(...args) {
@@ -8,8 +8,12 @@ class BugReport extends React.Component {
 
     this.thisWontWork = ({
       color
-    }) => data => {
-      return <div color={color}>does not reference data</div>;
+    }) => {
+      var _div;
+
+      return data => {
+        return _div || (_div = <div color={color}>does not reference data</div>);
+      };
     };
 
     this.thisWorks = ({
@@ -20,7 +24,7 @@ class BugReport extends React.Component {
   }
 
   render() {
-    return _ref;
+    return _div2 || (_div2 = <div />);
   }
 
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs
index ed30e4854564..9e61fb7c0db8 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/compound-assignment/output.mjs
@@ -1,9 +1,7 @@
+var _Loader, _Loader2;
+
 import React from 'react';
 import Loader from 'loader';
 
-var _ref = <Loader className="full-height" />;
-
-var _ref2 = <Loader className="p-y-5" />;
-
-const errorComesHere = () => _ref,
-      thisWorksFine = () => _ref2;
+const errorComesHere = () => _Loader || (_Loader = <Loader className="full-height" />),
+      thisWorksFine = () => _Loader2 || (_Loader2 = <Loader className="p-y-5" />);
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js
index e3e86ae68d6e..ffdc3b7b83c9 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/constructor/output.js
@@ -1,7 +1,7 @@
-var Foo = require("Foo");
+var _Foo;
 
-var _ref = <Foo />;
+var Foo = require("Foo");
 
 function render() {
-  return _ref;
+  return _Foo || (_Foo = <Foo />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js
index 325f0daf7c80..8433445bc998 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deep-constant-violation/output.js
@@ -1,12 +1,10 @@
-var _ref = <b></b>;
-
-var _ref2 = <span></span>;
+var _b, _span;
 
 function render() {
-  var children = _ref;
+  var children = _b || (_b = <b></b>);
 
   if (someCondition) {
-    children = _ref2;
+    children = _span || (_span = <span></span>);
   }
 
   return <div>{children}</div>;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs
index 83c8f677226e..a4e8fa17c05a 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs
@@ -1,3 +1,5 @@
+var _span;
+
 let foo = 'hello';
 
 const mutate = () => {
@@ -6,5 +8,5 @@ const mutate = () => {
 
 export const Component = () => {
   if (Math.random() > 0.5) mutate();
-  return <span>{foo}</span>;
+  return _span || (_span = <span>{foo}</span>);
 };
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs
index dd266a198d47..15241789ceae 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs
@@ -1,5 +1,7 @@
+var _span;
+
 let foo = 'hello';
 export const Component = () => {
   foo = 'goodbye';
-  return <span>{foo}</span>;
+  return _span || (_span = <span>{foo}</span>);
 };
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs
index 060811816d12..741f92d9b64d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-class/output.mjs
@@ -1,14 +1,13 @@
+var _div, _div2;
+
 import React from "react";
 
-const Parent = ({}) => _ref;
+const Parent = ({}) => _div || (_div = <div className="parent">
+    <Child />
+  </div>);
 
 export default Parent;
 
-var _ref2 = <div className="child">
+let Child = () => _div2 || (_div2 = <div className="child">
     ChildTextContent
-  </div>;
-
-let Child = () => _ref2,
-    _ref = <div className="parent">
-    <Child />
-  </div>;
+  </div>);
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js
index 878e19404bce..f40c08b855a3 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-declaration/output.js
@@ -1,16 +1,18 @@
 function render() {
+  var _foo;
+
   const bar = "bar",
-        _ref = <foo bar={bar} />,
-        renderFoo = () => _ref;
+        renderFoo = () => _foo || (_foo = <foo bar={bar} />);
 
   return renderFoo();
 }
 
 function render() {
+  var _foo2;
+
   const bar = "bar",
-        renderFoo = () => _ref2,
-        baz = "baz",
-        _ref2 = <foo bar={bar} baz={baz} />;
+        renderFoo = () => _foo2 || (_foo2 = <foo bar={bar} baz={baz} />),
+        baz = "baz";
 
   return renderFoo();
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js
index 86a47eb10a31..eb63e3b7653d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params-2/output.js
@@ -1,7 +1,6 @@
 function render() {
-  var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  var _ref = <Component title={title} />;
+  var _Component;
 
-  return () => _ref;
+  var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return () => _Component || (_Component = <Component title={title} />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js
index 6780bc3d8930..9706218270f4 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-default-params/output.js
@@ -1,8 +1,8 @@
 function render(Component) {
-  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '',
-      _ref = <Component text={text} />;
+  var _Component;
 
+  var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return function () {
-    return _ref;
+    return _Component || (_Component = <Component text={text} />);
   };
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs
index d1521a3baf4b..a4da896b7be5 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/dont-hoist-before-hoc/output.mjs
@@ -1,19 +1,17 @@
+var _div, _div2;
+
 import React from "react";
 
 const HOC = component => component;
 
-const Parent = ({}) => _ref;
+const Parent = ({}) => _div || (_div = <div className="parent">
+    <Child />
+  </div>);
 
 export default Parent;
 
-var _ref2 = <div className="child">
+let Child = () => _div2 || (_div2 = <div className="child">
     ChildTextContent
-  </div>;
-
-let Child = () => _ref2;
+  </div>);
 
 Child = HOC(Child);
-
-var _ref = <div className="parent">
-    <Child />
-  </div>;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js
index 0e737624dad5..ee3ec4ef4f2a 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/function-parameter/output.js
@@ -1,17 +1,17 @@
 function render(text) {
-  var _ref = <foo>{text}</foo>;
+  var _foo;
 
   return function () {
-    return _ref;
+    return _foo || (_foo = <foo>{text}</foo>);
   };
 }
 
 var Foo2 = require("Foo");
 
 function createComponent(text) {
-  var _ref2 = <Foo2>{text}</Foo2>;
+  var _Foo;
 
   return function render() {
-    return _ref2;
+    return _Foo || (_Foo = <Foo2>{text}</Foo2>);
   };
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js
index 2bfa9cf8e676..e7d32f1d64b6 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js
@@ -1,7 +1,7 @@
-var _ref = <div foo={notDeclared}></div>;
+var _div;
 
 var Foo = React.createClass({
   render: function render() {
-    return _ref;
+    return _div || (_div = <div foo={notDeclared}></div>);
   }
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js
index 7ec3220a51ab..150e87daf34c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/html-element/output.js
@@ -1,11 +1,9 @@
-var _ref = <foo />;
+var _foo, _div;
 
 function render() {
-  return _ref;
+  return _foo || (_foo = <foo />);
 }
 
-var _ref2 = <div className="foo"><input type="checkbox" checked={true} /></div>;
-
 function render() {
-  return _ref2;
+  return _div || (_div = <div className="foo"><input type="checkbox" checked={true} /></div>);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js
index 5be06a3e3d42..c32c94bcda98 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/output.js
@@ -1,15 +1,14 @@
-var _ref = /*#__PURE__*/babelHelpers.jsx("foo", {});
+var _foo;
 
 function render() {
-  return _ref;
+  return _foo || (_foo = /*#__PURE__*/babelHelpers.jsx("foo", {}));
 }
 
 function render() {
-  var text = getText();
-
-  var _ref2 = /*#__PURE__*/babelHelpers.jsx("foo", {}, void 0, text);
+  var _foo2;
 
+  var text = getText();
   return function () {
-    return _ref2;
+    return _foo2 || (_foo2 = /*#__PURE__*/babelHelpers.jsx("foo", {}, void 0, text));
   };
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js
index b0e2cde1adf9..5c99eb8a925c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inner-declaration/output.js
@@ -1,9 +1,8 @@
 function render() {
-  var text = getText();
-
-  var _ref = <foo>{text}</foo>;
+  var _foo;
 
+  var text = getText();
   return function () {
-    return _ref;
+    return _foo || (_foo = <foo>{text}</foo>);
   };
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/output.mjs
new file mode 100644
index 000000000000..96c3534c6e77
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/output.mjs
@@ -0,0 +1,16 @@
+function outer(arg) {
+  var _A;
+
+  const valueB = null;
+  const valueA = {};
+
+  function inner() {
+    console.log(_A || (_A = <A keyA={valueA}>
+        <B keyB={valueB}>
+          <C keyC={arg} />
+        </B>
+      </A>));
+  }
+
+  inner();
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
index aa7a9994baeb..ae1872161b7f 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
@@ -1,7 +1,6 @@
+var _this$component;
+
 function render() {
   this.component = "div";
-
-  var _ref = <this.component />;
-
-  return () => _ref;
+  return () => _this$component || (_this$component = <this.component />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
index b9e52e3a52ab..1199238ca7cb 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
@@ -1,14 +1,12 @@
-var _ref = <span>Sub Component</span>;
+var _span, _this$subComponent;
 
 class Component extends React.Component {
   constructor(...args) {
     super(...args);
 
-    this.subComponent = () => _ref;
+    this.subComponent = () => _span || (_span = <span>Sub Component</span>);
 
-    var _ref2 = <this.subComponent />;
-
-    this.render = () => _ref2;
+    this.render = () => _this$subComponent || (_this$subComponent = <this.subComponent />);
   }
 
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js
index 96fc93c58dee..8509a145f85a 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/output.js
@@ -1,16 +1,14 @@
-var _ref = <span>Sub Component</span>;
+var _span, _els$subComponent;
 
 const els = {
-  subComponent: () => _ref
+  subComponent: () => _span || (_span = <span>Sub Component</span>)
 };
 
-var _ref2 = <els.subComponent />;
-
 class Component extends React.Component {
   constructor(...args) {
     super(...args);
 
-    this.render = () => _ref2;
+    this.render = () => _els$subComponent || (_els$subComponent = <els.subComponent />);
   }
 
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js
index 599a2b929768..ba4339733d49 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/param-and-var/output.js
@@ -1,6 +1,6 @@
 function fn(Component, obj) {
-  var data = obj.data,
-      _ref = <Component prop={data} />;
+  var _Component;
 
-  return () => _ref;
+  var data = obj.data;
+  return () => _Component || (_Component = <Component prop={data} />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js
index c039c14143f5..140c9e9a753c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-multi/output.js
@@ -1,9 +1,8 @@
 function render(_ref) {
+  var _Component;
+
   let text = _ref.text,
       className = _ref.className,
       id = _ref.id;
-
-  var _ref2 = <Component text={text} className={className} id={id} />;
-
-  return () => _ref2;
+  return () => _Component || (_Component = <Component text={text} className={className} id={id} />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js
index a00f73f6f44f..1d844d9eea6d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure-rest/output.js
@@ -1,11 +1,10 @@
 function render(_ref) {
+  var _Component;
+
   let text = _ref.text,
       className = _ref.className,
       id = _ref.id,
       props = babelHelpers.objectWithoutProperties(_ref, ["text", "className", "id"]);
-
-  var _ref2 = <Component text={text} className={className} id={id} />;
-
   // intentionally ignoring props
-  return () => _ref2;
+  return () => _Component || (_Component = <Component text={text} className={className} id={id} />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js
index 272a607c98cc..b46ab74c8217 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-destructure/output.js
@@ -1,7 +1,6 @@
 function render(_ref) {
-  let text = _ref.text;
-
-  var _ref2 = <Component text={text} />;
+  var _Component;
 
-  return () => _ref2;
+  let text = _ref.text;
+  return () => _Component || (_Component = <Component text={text} />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js
index bec3e3499344..5f084eb8af8d 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/parameter-reference/output.js
@@ -1,8 +1,8 @@
 function render(text) {
-  var _ref = <div>{text}</div>;
+  var _div;
 
   return function () {
-    return _ref;
+    return _div || (_div = <div>{text}</div>);
   };
 }
 
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js
index 71dfc286ceb0..a19ef96b204c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-2/output.js
@@ -1,7 +1,7 @@
 function render(offset) {
-  var _ref = <div tabIndex={offset + 1} />;
+  var _div;
 
   return function () {
-    return _ref;
+    return _div || (_div = <div tabIndex={offset + 1} />);
   };
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js
index 79c8b1db9907..0881ed7c974e 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-3/output.js
@@ -1,9 +1,8 @@
-const OFFSET = 3;
-
-var _ref = <div tabIndex={OFFSET + 1} />;
+var _div;
 
+const OFFSET = 3;
 var Foo = React.createClass({
   render: function () {
-    return _ref;
+    return _div || (_div = <div tabIndex={OFFSET + 1} />);
   }
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs
index 1452baefa3a7..e141a9d071e8 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist-member/output.mjs
@@ -1,11 +1,10 @@
-import Intl from 'react-intl';
-
-var _ref = <Intl.FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
-  someValue: "A value."
-}} />;
+var _Intl$FormattedMessag;
 
+import Intl from 'react-intl';
 var Foo = React.createClass({
   render: function () {
-    return _ref;
+    return _Intl$FormattedMessag || (_Intl$FormattedMessag = <Intl.FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
+      someValue: "A value."
+    }} />);
   }
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js
index 9df27d0157b4..3c965470e497 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression-whitelist/output.js
@@ -1,9 +1,9 @@
-var _ref = <FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
-  someValue: "A value."
-}} />;
+var _FormattedMessage;
 
 var Foo = React.createClass({
   render: function () {
-    return _ref;
+    return _FormattedMessage || (_FormattedMessage = <FormattedMessage id="someMessage.foo" defaultMessage={"Some text, " + "and some more too. {someValue}"} description="A test message for babel." values={{
+      someValue: "A value."
+    }} />);
   }
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js
index 957dc4a8a21b..a1d20c07c1c7 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/pure-expression/output.js
@@ -1,7 +1,7 @@
-var _ref = <div data-text={"Some text, " + "and some more too."} />;
+var _div;
 
 var Foo = React.createClass({
   render: function () {
-    return _ref;
+    return _div || (_div = <div data-text={"Some text, " + "and some more too."} />);
   }
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js
index 9eb9d792f143..6611027b3429 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/reassignment/output.js
@@ -1,9 +1,8 @@
 function render(text) {
-  text += "yes";
-
-  var _ref = <div>{text}</div>;
+  var _div;
 
+  text += "yes";
   return function () {
-    return _ref;
+    return _div || (_div = <div>{text}</div>);
   };
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs
index d85957714c53..eab70ae8d614 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export-default/output.mjs
@@ -1,10 +1,10 @@
+var _B;
+
 class A {
   render() {
-    return _ref;
+    return _B || (_B = /*#__PURE__*/React.createElement(B, null));
   }
 
 }
 
 export default class B {}
-
-var _ref = /*#__PURE__*/React.createElement(B, null);
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs
index 2240e0bc5c8f..2df3952bf4aa 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/regression-node-type-export/output.mjs
@@ -1,10 +1,10 @@
+var _B;
+
 class A {
   render() {
-    return _ref;
+    return _B || (_B = /*#__PURE__*/React.createElement(B, null));
   }
 
 }
 
 export class B {}
-
-var _ref = /*#__PURE__*/React.createElement(B, null);
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js
index 43898f741313..14881d483fad 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/text-children/output.js
@@ -1,9 +1,9 @@
-var _ref = <div className="class-name">
-      Text
-    </div>;
+var _div;
 
 var Foo = React.createClass({
   render: function () {
-    return _ref;
+    return _div || (_div = <div className="class-name">
+      Text
+    </div>);
   }
 });
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js
index a0bf6d783bed..7123cb01d3b3 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/var/output.js
@@ -1,6 +1,6 @@
 function fn(Component) {
-  var data = "prop",
-      _ref = <Component prop={data} />;
+  var _Component;
 
-  return () => _ref;
+  var data = "prop";
+  return () => _Component || (_Component = <Component prop={data} />);
 }

From 10c5b0870087862f54c1914f77da2f2606504ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 00:10:16 +0100
Subject: [PATCH 03/12] Add tests for fixed bugs

---
 .../after-return-issue-6751/input.js          |  8 ++++++
 .../after-return-issue-6751/output.js         | 13 ++++++++++
 .../imported-components-issue-12337/input.mjs | 13 ++++++++++
 .../output.mjs                                | 11 ++++++++
 .../constant-elements/issue-11686/input.mjs   | 16 ++++++++++++
 .../integration/issue-10879/input.mjs         | 12 +++++++++
 .../integration/issue-10879/options.json      |  4 +++
 .../integration/issue-10879/output.js         | 20 ++++++++++++++
 .../integration/issue-12303/input.mjs         |  6 +++++
 .../integration/issue-12303/options.json      |  7 +++++
 .../integration/issue-12303/output.mjs        |  9 +++++++
 .../fixtures/integration/issue-7610/input.mjs | 10 +++++++
 .../integration/issue-7610/options.json       |  4 +++
 .../fixtures/integration/issue-7610/output.js | 26 +++++++++++++++++++
 14 files changed, 159 insertions(+)
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/input.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/output.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/output.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/options.json
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/output.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js

diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/input.js
new file mode 100644
index 000000000000..a07f84cb030f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/input.js
@@ -0,0 +1,8 @@
+function AComponent () {
+  const CComponent = () => <div/>
+  return <BComponent/>
+
+  function BComponent () {
+    return <CComponent/>
+  }
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/output.js
new file mode 100644
index 000000000000..41bae7bbc50c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/after-return-issue-6751/output.js
@@ -0,0 +1,13 @@
+var _div;
+
+function AComponent() {
+  var _CComponent;
+
+  const CComponent = () => _div || (_div = <div />);
+
+  return <BComponent />;
+
+  function BComponent() {
+    return _CComponent || (_CComponent = <CComponent />);
+  }
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/input.mjs
new file mode 100644
index 000000000000..47ef3a8badce
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/input.mjs
@@ -0,0 +1,13 @@
+import React from "react";
+import OtherComponent from "./components/other-component";
+
+export default function App() {
+  return (
+    <div>
+      <LazyComponent />
+      <OtherComponent />
+    </div>
+  );
+}
+
+const LazyComponent = React.lazy(() => import("./components/lazy-component"));
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/output.mjs
new file mode 100644
index 000000000000..bc839b45a0ed
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/imported-components-issue-12337/output.mjs
@@ -0,0 +1,11 @@
+var _div;
+
+import React from "react";
+import OtherComponent from "./components/other-component";
+export default function App() {
+  return _div || (_div = <div>
+      <LazyComponent />
+      <OtherComponent />
+    </div>);
+}
+const LazyComponent = React.lazy(() => import("./components/lazy-component"));
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/input.mjs
new file mode 100644
index 000000000000..29533a6d766c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/issue-11686/input.mjs
@@ -0,0 +1,16 @@
+function outer(arg) {
+  const valueB = null;
+  const valueA = {};
+
+  function inner() {
+    console.log(
+      <A keyA={valueA}>
+        <B keyB={valueB}>
+          <C keyC={arg} />
+        </B>
+      </A>
+    );
+  }
+
+  inner();
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/input.mjs
new file mode 100644
index 000000000000..009e916dd701
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/input.mjs
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const namespace = {
+  MyComponent: (props) => props.name
+};
+
+const buildTest = (name) => {
+  const { MyComponent } = namespace;
+  return () => (
+    <MyComponent name={name} />
+  );
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
new file mode 100644
index 000000000000..a6f65ac4fc4c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+  "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
new file mode 100644
index 000000000000..d7a47a8c79ae
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
@@ -0,0 +1,20 @@
+"use strict";
+
+var _react = babelHelpers.interopRequireDefault(require("react"));
+
+var namespace = {
+  MyComponent: function MyComponent(props) {
+    return props.name;
+  }
+};
+
+var buildTest = function buildTest(name) {
+  var _MyComponent;
+
+  var MyComponent = namespace.MyComponent;
+  return function () {
+    return _MyComponent || (_MyComponent = /*#__PURE__*/_react["default"].createElement(MyComponent, {
+      name: name
+    }));
+  };
+};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/input.mjs
new file mode 100644
index 000000000000..d060deb32ce8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/input.mjs
@@ -0,0 +1,6 @@
+function Foo({outsetArrows, ...rest}) {
+  return useMemo(
+    () => <div outsetArrows={outsetArrows}/>,
+    [outsetArrows]
+  );
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/options.json
new file mode 100644
index 000000000000..7b8045a4f4f9
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/options.json
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    "syntax-jsx",
+    "transform-react-constant-elements",
+    "proposal-object-rest-spread"
+  ]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/output.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/output.mjs
new file mode 100644
index 000000000000..ea732bb287f4
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-12303/output.mjs
@@ -0,0 +1,9 @@
+function Foo(_ref) {
+  var _div;
+
+  let {
+    outsetArrows
+  } = _ref,
+      rest = babelHelpers.objectWithoutProperties(_ref, ["outsetArrows"]);
+  return useMemo(() => _div || (_div = <div outsetArrows={outsetArrows} />), [outsetArrows]);
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/input.mjs
new file mode 100644
index 000000000000..266269ea4172
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/input.mjs
@@ -0,0 +1,10 @@
+import Parent from './Parent';
+import Child from './Child';
+
+function MyComponent({closeFn}) {
+  return (
+    <Parent render={() => <Child closeFn={closeFn} /> } />
+  );
+}
+
+export default Parent;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
new file mode 100644
index 000000000000..a6f65ac4fc4c
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+  "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js
new file mode 100644
index 000000000000..49273e64ca16
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Parent = babelHelpers.interopRequireDefault(require("./Parent"));
+
+var _Child2 = babelHelpers.interopRequireDefault(require("./Child"));
+
+function MyComponent(_ref) {
+  var _Child;
+
+  var closeFn = _ref.closeFn;
+  return /*#__PURE__*/React.createElement(_Parent["default"], {
+    render: function render() {
+      return _Child || (_Child = /*#__PURE__*/React.createElement(_Child2["default"], {
+        closeFn: closeFn
+      }));
+    }
+  });
+}
+
+var _default = _Parent["default"];
+exports["default"] = _default;

From 987948f0a0c0e68aba89ebefcaac95a88a8a66a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 00:12:02 +0100
Subject: [PATCH 04/12] Update other fixtures

---
 .../test/fixtures/regression/7178/output.js          | 10 +++++-----
 .../optimisation.react.constant-elements/output.mjs  | 12 ++++++------
 .../optimisation.react.constant-elements/output.js   | 12 ++++++------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js b/packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js
index 890bc6fa11f0..fa92006afe68 100644
--- a/packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js
+++ b/packages/babel-plugin-transform-async-to-generator/test/fixtures/regression/7178/output.js
@@ -1,16 +1,16 @@
+var _Contact;
+
 const title = "Neem contact op";
 
 function action() {
   return _action.apply(this, arguments);
 }
 
-var _ref = /*#__PURE__*/React.createElement(Contact, {
-  title: title
-});
-
 function _action() {
   _action = babelHelpers.asyncToGenerator(function* () {
-    return _ref;
+    return _Contact || (_Contact = /*#__PURE__*/React.createElement(Contact, {
+      title: title
+    }));
   });
   return _action.apply(this, arguments);
 }
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs
index 188cfa91ed06..9ef52b984626 100644
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react-automatic/optimisation.react.constant-elements/output.mjs
@@ -1,8 +1,4 @@
-var _ref = <div className="navbar-header">
-      <a className="navbar-brand" href="/">
-        <img src="/img/logo/logo-96x36.png" />
-      </a>
-    </div>;
+var _div;
 
 let App = /*#__PURE__*/function (_React$Component) {
   babelHelpers.inherits(App, _React$Component);
@@ -17,7 +13,11 @@ let App = /*#__PURE__*/function (_React$Component) {
   babelHelpers.createClass(App, [{
     key: "render",
     value: function render() {
-      const navbarHeader = _ref;
+      const navbarHeader = _div || (_div = <div className="navbar-header">
+      <a className="navbar-brand" href="/">
+        <img src="/img/logo/logo-96x36.png" />
+      </a>
+    </div>);
       return <div>
       <nav className="navbar navbar-default">
         <div className="container">
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js
index 92eda2c98a9e..1e46db01abe0 100644
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/optimisation.react.constant-elements/output.js
@@ -1,8 +1,4 @@
-var _ref = <div className="navbar-header">
-      <a className="navbar-brand" href="/">
-        <img src="/img/logo/logo-96x36.png" />
-      </a>
-    </div>;
+var _div;
 
 let App = /*#__PURE__*/function (_React$Component) {
   "use strict";
@@ -19,7 +15,11 @@ let App = /*#__PURE__*/function (_React$Component) {
   babelHelpers.createClass(App, [{
     key: "render",
     value: function render() {
-      const navbarHeader = _ref;
+      const navbarHeader = _div || (_div = <div className="navbar-header">
+      <a className="navbar-brand" href="/">
+        <img src="/img/logo/logo-96x36.png" />
+      </a>
+    </div>);
       return <div>
       <nav className="navbar navbar-default">
         <div className="container">

From 6197d97b315aaa57ef90d7dacbb8532c9ae35c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 00:43:47 +0100
Subject: [PATCH 05/12] Babel 8 tests

---
 .../integration/issue-10879-babel-7/input.mjs | 12 +++++++++
 .../issue-10879-babel-7/options.json          |  5 ++++
 .../integration/issue-10879-babel-7/output.js | 20 ++++++++++++++
 .../integration/issue-10879/options.json      |  1 +
 .../integration/issue-10879/output.js         |  4 ++-
 .../integration/issue-7610-babel-7/input.mjs  | 10 +++++++
 .../issue-7610-babel-7/options.json           |  5 ++++
 .../integration/issue-7610-babel-7/output.js  | 26 +++++++++++++++++++
 .../integration/issue-7610/options.json       |  1 +
 .../fixtures/integration/issue-7610/output.js |  6 +++--
 10 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/options.json
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/output.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/options.json
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/output.js

diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/input.mjs
new file mode 100644
index 000000000000..009e916dd701
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/input.mjs
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const namespace = {
+  MyComponent: (props) => props.name
+};
+
+const buildTest = (name) => {
+  const { MyComponent } = namespace;
+  return () => (
+    <MyComponent name={name} />
+  );
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/options.json
new file mode 100644
index 000000000000..bc2da3765558
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/options.json
@@ -0,0 +1,5 @@
+{
+  "BABEL_8_BREAKING": false,
+  "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+  "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/output.js
new file mode 100644
index 000000000000..d7a47a8c79ae
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879-babel-7/output.js
@@ -0,0 +1,20 @@
+"use strict";
+
+var _react = babelHelpers.interopRequireDefault(require("react"));
+
+var namespace = {
+  MyComponent: function MyComponent(props) {
+    return props.name;
+  }
+};
+
+var buildTest = function buildTest(name) {
+  var _MyComponent;
+
+  var MyComponent = namespace.MyComponent;
+  return function () {
+    return _MyComponent || (_MyComponent = /*#__PURE__*/_react["default"].createElement(MyComponent, {
+      name: name
+    }));
+  };
+};
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
index a6f65ac4fc4c..5ca7f1f79be3 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/options.json
@@ -1,4 +1,5 @@
 {
+  "BABEL_8_BREAKING": true,
   "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
   "presets": ["env"]
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
index d7a47a8c79ae..c3335df084d1 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-10879/output.js
@@ -2,6 +2,8 @@
 
 var _react = babelHelpers.interopRequireDefault(require("react"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var namespace = {
   MyComponent: function MyComponent(props) {
     return props.name;
@@ -13,7 +15,7 @@ var buildTest = function buildTest(name) {
 
   var MyComponent = namespace.MyComponent;
   return function () {
-    return _MyComponent || (_MyComponent = /*#__PURE__*/_react["default"].createElement(MyComponent, {
+    return _MyComponent || (_MyComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(MyComponent, {
       name: name
     }));
   };
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/input.mjs b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/input.mjs
new file mode 100644
index 000000000000..266269ea4172
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/input.mjs
@@ -0,0 +1,10 @@
+import Parent from './Parent';
+import Child from './Child';
+
+function MyComponent({closeFn}) {
+  return (
+    <Parent render={() => <Child closeFn={closeFn} /> } />
+  );
+}
+
+export default Parent;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/options.json
new file mode 100644
index 000000000000..bc2da3765558
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/options.json
@@ -0,0 +1,5 @@
+{
+  "BABEL_8_BREAKING": false,
+  "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
+  "presets": ["env"]
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/output.js
new file mode 100644
index 000000000000..49273e64ca16
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610-babel-7/output.js
@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Parent = babelHelpers.interopRequireDefault(require("./Parent"));
+
+var _Child2 = babelHelpers.interopRequireDefault(require("./Child"));
+
+function MyComponent(_ref) {
+  var _Child;
+
+  var closeFn = _ref.closeFn;
+  return /*#__PURE__*/React.createElement(_Parent["default"], {
+    render: function render() {
+      return _Child || (_Child = /*#__PURE__*/React.createElement(_Child2["default"], {
+        closeFn: closeFn
+      }));
+    }
+  });
+}
+
+var _default = _Parent["default"];
+exports["default"] = _default;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
index a6f65ac4fc4c..5ca7f1f79be3 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/options.json
@@ -1,4 +1,5 @@
 {
+  "BABEL_8_BREAKING": true,
   "plugins": ["transform-react-jsx", "transform-react-constant-elements"],
   "presets": ["env"]
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js
index 49273e64ca16..9b8eb7bfc11e 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/integration/issue-7610/output.js
@@ -9,13 +9,15 @@ var _Parent = babelHelpers.interopRequireDefault(require("./Parent"));
 
 var _Child2 = babelHelpers.interopRequireDefault(require("./Child"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function MyComponent(_ref) {
   var _Child;
 
   var closeFn = _ref.closeFn;
-  return /*#__PURE__*/React.createElement(_Parent["default"], {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Parent["default"], {
     render: function render() {
-      return _Child || (_Child = /*#__PURE__*/React.createElement(_Child2["default"], {
+      return _Child || (_Child = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Child2["default"], {
         closeFn: closeFn
       }));
     }

From 294a08bf764d803a272dafd0f0b29c1d04db7682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 01:00:50 +0100
Subject: [PATCH 06/12] Update
 packages/babel-plugin-transform-react-constant-elements/src/index.js

Co-authored-by: Justin Ridgewell <justin@ridgewell.name>
---
 .../babel-plugin-transform-react-constant-elements/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index 4db79dfada02..364085665e15 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/packages/babel-plugin-transform-react-constant-elements/src/index.js
@@ -148,7 +148,7 @@ export default declare((api, options) => {
         if (HOISTED.has(path.node)) return;
         HOISTED.set(path.node, path.scope);
 
-        const name = path.get("openingElement.name").node;
+        const name = path.node.openingElement.name;
 
         // This transform takes the option `allowMutablePropsOnTags`, which is an array
         // of JSX tags to allow mutable props (such as objects, functions) on. Use sparingly

From e98bff149bbb5233a2f6d37bd5fb44568791c23d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 01:24:36 +0100
Subject: [PATCH 07/12] Fix `this` handling

---
 .../src/index.js                              | 21 +++++++++++++++----
 .../member-expression-constant/output.js      |  4 ++--
 .../member-expression-this/output.js          |  4 +++-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index 364085665e15..40d929e992b4 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/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;
       }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
index ae1872161b7f..8740b7ab3d40 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/output.js
+++ b/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 />);
 }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
index 1199238ca7cb..5b8ea9c932f9 100644
--- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/output.js
+++ b/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>);

From 6c2016457271abda0a24eef981d31adfaad00aa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 10:05:22 +0100
Subject: [PATCH 08/12] Update
 packages/babel-plugin-transform-react-constant-elements/src/index.js

Co-authored-by: Justin Ridgewell <justin@ridgewell.name>
---
 .../src/index.js                                           | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index 40d929e992b4..b549ff16052c 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/packages/babel-plugin-transform-react-constant-elements/src/index.js
@@ -23,7 +23,12 @@ export default declare((api, options) => {
     scope,
   ) {
     // Ideally this should always be a ThisExpression 🤷
-    if (t.isThisExpression(node) || t.isJSXIdentifier(node, { name: "this" })) {
+    if (
+      t.isJSXIdentifier(node, { name: "this" }) ||
+      t.isJSXIdentifier(node, { name: "arguments" }) ||
+      t.isJSXIdentifier(node, { name: "super" }) ||
+      t.isJSXIdentifier(node, { name: "new" })
+    ) {
       const { path } = scope;
       return path.isFunctionParent() && !path.isArrowFunctionExpression();
     }

From 7de9a22f0111a38bf2718310996eec10acacc1c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 11:44:57 +0100
Subject: [PATCH 09/12] Add test

---
 .../src/index.js                              |  8 ++---
 .../magical-bindings/input.js                 | 29 ++++++++++++++++
 .../magical-bindings/output.js                | 34 +++++++++++++++++++
 3 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/input.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/output.js

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index b549ff16052c..771b3f4b4ea0 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/packages/babel-plugin-transform-react-constant-elements/src/index.js
@@ -18,11 +18,7 @@ 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 🤷
+  function declares(node: t.Identifier | t.JSXIdentifier, scope) {
     if (
       t.isJSXIdentifier(node, { name: "this" }) ||
       t.isJSXIdentifier(node, { name: "arguments" }) ||
@@ -94,7 +90,7 @@ export default declare((api, options) => {
         stop();
       }
     },
-    "ReferencedIdentifier|ThisExpression"(path, state) {
+    ReferencedIdentifier(path, state) {
       const { node } = path;
       let { scope } = path;
       let targetScope;
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/input.js
new file mode 100644
index 000000000000..6bbbeedd96a0
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/input.js
@@ -0,0 +1,29 @@
+function thisExpr() {
+  return <p>{this.Foo}</p>;
+}
+function thisJSX() {
+  return <this.Foo />;
+}
+
+class A extends B {
+  superExpr() {
+    return <p>{super.Foo}</p>;
+  }
+  superJSX() {
+    return <super.Foo />;
+  }
+}
+
+function argumentsExpr() {
+  return <p>{arguments.Foo}</p>;
+}
+function argumentsJSX() {
+  return <arguments.Foo />;
+}
+
+function newTargetExpr() {
+  return <p>{new.target.Foo}</p>;
+}
+function newTargetJSX() {
+  return <new.target.Foo />;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/output.js
new file mode 100644
index 000000000000..d34675c33953
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/magical-bindings/output.js
@@ -0,0 +1,34 @@
+function thisExpr() {
+  return <p>{this.Foo}</p>;
+}
+
+function thisJSX() {
+  return <this.Foo />;
+}
+
+class A extends B {
+  superExpr() {
+    return <p>{super.Foo}</p>;
+  }
+
+  superJSX() {
+    return <super.Foo />;
+  }
+
+}
+
+function argumentsExpr() {
+  return <p>{arguments.Foo}</p>;
+}
+
+function argumentsJSX() {
+  return <arguments.Foo />;
+}
+
+function newTargetExpr() {
+  return <p>{new.target.Foo}</p>;
+}
+
+function newTargetJSX() {
+  return <new.target.Foo />;
+}

From f56c1ef80abe1ab8a701aa6b92ff0f6b2a4c6d85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Fri, 5 Mar 2021 19:20:16 +0100
Subject: [PATCH 10/12] Simplify implementation

Co-authored-by: Justin Ridgewell <justin@ridgewell.name>
---
 .../src/index.js                              | 72 +++++++++++++------
 1 file changed, 50 insertions(+), 22 deletions(-)

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index 771b3f4b4ea0..cd0f80bf0285 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/packages/babel-plugin-transform-react-constant-elements/src/index.js
@@ -32,6 +32,15 @@ export default declare((api, options) => {
     return scope.hasOwnBinding(node.name);
   }
 
+  function isHoistingScope({ path }) {
+    return path.isFunctionParent() || path.isLoop() || path.isProgram();
+  }
+
+  function getHoistingScope(scope) {
+    while (!isHoistingScope(scope)) scope = scope.parent;
+    return scope;
+  }
+
   const analyzer = {
     enter(path, state) {
       const stop = () => {
@@ -90,6 +99,31 @@ export default declare((api, options) => {
         stop();
       }
     },
+
+    ReferencedIdentifier(path, state) {
+      const { node } = path;
+      let { scope } = path;
+
+      while (scope) {
+        // We cannot hoist outside of the previous hoisting target
+        // scope, so we return early and we don't update it.
+        if (scope === state.targetScope) return;
+
+        // If the scope declares this identifier (or we're at the function
+        // providing the lexical env binding), we can't hoist the var any
+        // higher.
+        if (declares(node, scope)) break;
+
+        scope = scope.parent;
+      }
+
+      state.targetScope = getHoistingScope(scope);
+    },
+
+    /*
+    See the discussion at https://github.com/babel/babel/pull/12967#discussion_r587948958
+    to uncomment this code.
+
     ReferencedIdentifier(path, state) {
       const { node } = path;
       let { scope } = path;
@@ -129,10 +163,7 @@ export default declare((api, options) => {
         if (scope === state.jsxScope) {
           needsHoisting = false;
         }
-        if (
-          !needsHoisting &&
-          (scope.path.isFunctionParent() || scope.path.isLoop())
-        ) {
+        if (!needsHoisting && isHoistingScope(scope)) {
           needsHoisting = true;
         }
 
@@ -151,7 +182,7 @@ export default declare((api, options) => {
       }
 
       if (targetScope) state.targetScope = targetScope;
-    },
+    },*/
   };
 
   return {
@@ -180,23 +211,10 @@ export default declare((api, options) => {
           mutablePropsAllowed = allowMutablePropsOnTags.includes(elementName);
         }
 
-        // In order to avoid hoisting unnecessarily, we need to know which is
-        // the scope containing the current JSX element. If a parent of the
-        // current element has already been hoisted, we can consider its target
-        // scope as the base scope for the current element.
-        let jsxScope;
-        let current = path;
-        while (!jsxScope && current.parentPath.isJSXElement()) {
-          current = current.parentPath;
-          jsxScope = HOISTED.get(current.node);
-        }
-        jsxScope ??= path.scope;
-
         const state = {
           isImmutable: true,
           mutablePropsAllowed,
-          jsxScope,
-          targetScope: null,
+          targetScope: path.scope.getProgramParent(),
         };
 
         // Traverse all props passed to this element for immutability,
@@ -205,11 +223,21 @@ export default declare((api, options) => {
 
         if (!state.isImmutable) return;
 
-        // If we didn't find any hoisting constraint, we can hoist the current
-        // helement to the program scope.
-        const targetScope = state.targetScope ?? path.scope.getProgramParent();
+        const { targetScope } = state;
         HOISTED.set(path.node, targetScope);
 
+        // In order to avoid hoisting unnecessarily, we need to know which is
+        // the scope containing the current JSX element. If a parent of the
+        // current element has already been hoisted, we can consider its target
+        // scope as the base scope for the current element.
+        let jsxScope;
+        let current = path;
+        while (!jsxScope && current.parentPath.isJSXElement()) {
+          current = current.parentPath;
+          jsxScope = HOISTED.get(current.node);
+        }
+        jsxScope ??= getHoistingScope(path.scope);
+
         // Only hoist if it would give us an advantage.
         if (targetScope === jsxScope) return;
 

From e239247b046be9c6636c3bae7cc32cc1e31fdef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Sat, 6 Mar 2021 16:52:13 +0100
Subject: [PATCH 11/12] Fix handling of JSX elements in attributes

---
 .../src/index.js                                           | 7 +++++--
 .../test/fixtures/constant-elements/jsx-in-prop-2/input.js | 3 +++
 .../fixtures/constant-elements/jsx-in-prop-2/output.js     | 5 +++++
 .../test/fixtures/constant-elements/jsx-in-prop/input.js   | 3 +++
 .../test/fixtures/constant-elements/jsx-in-prop/output.js  | 5 +++++
 5 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/input.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/output.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/input.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/output.js

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index cd0f80bf0285..ac373f351385 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/packages/babel-plugin-transform-react-constant-elements/src/index.js
@@ -232,7 +232,7 @@ export default declare((api, options) => {
         // scope as the base scope for the current element.
         let jsxScope;
         let current = path;
-        while (!jsxScope && current.parentPath.isJSXElement()) {
+        while (!jsxScope && current.parentPath.isJSX()) {
           current = current.parentPath;
           jsxScope = HOISTED.get(current.node);
         }
@@ -247,7 +247,10 @@ export default declare((api, options) => {
         let replacement = template.expression.ast`
           ${t.identifier(id)} || (${t.identifier(id)} = ${path.node})
         `;
-        if (path.parentPath.isJSXElement()) {
+        if (
+          path.parentPath.isJSXElement() ||
+          path.parentPath.isJSXAttribute()
+        ) {
           replacement = t.jsxExpressionContainer(replacement);
         }
 
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/input.js
new file mode 100644
index 000000000000..2fd3245951bb
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/input.js
@@ -0,0 +1,3 @@
+function C(x) {
+  return <div x={x} attr=<span /> />;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/output.js
new file mode 100644
index 000000000000..2d78d95824f8
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop-2/output.js
@@ -0,0 +1,5 @@
+var _span;
+
+function C(x) {
+  return <div x={x} attr={_span || (_span = <span />)} />;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/input.js
new file mode 100644
index 000000000000..1ca5d8f12394
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/input.js
@@ -0,0 +1,3 @@
+function C() {
+  return <div attr=<span /> />;
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/output.js
new file mode 100644
index 000000000000..1b38cdbee920
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/jsx-in-prop/output.js
@@ -0,0 +1,5 @@
+var _div;
+
+function C() {
+  return _div || (_div = <div attr=<span /> />);
+}

From a4e85509acc9521d3d072b28ef5dfff0812ee3e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Sat, 6 Mar 2021 16:53:10 +0100
Subject: [PATCH 12/12] Cache namespaced elements

---
 .../src/index.js                                         | 3 ++-
 .../test/fixtures/constant-elements/namespace/input.js   | 7 +++++++
 .../test/fixtures/constant-elements/namespace/output.js  | 9 +++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/input.js
 create mode 100644 packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/output.js

diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.js b/packages/babel-plugin-transform-react-constant-elements/src/index.js
index ac373f351385..2e486772bdd8 100644
--- a/packages/babel-plugin-transform-react-constant-elements/src/index.js
+++ b/packages/babel-plugin-transform-react-constant-elements/src/index.js
@@ -65,7 +65,8 @@ export default declare((api, options) => {
       if (
         path.isJSXIdentifier() ||
         path.isIdentifier() ||
-        path.isJSXMemberExpression()
+        path.isJSXMemberExpression() ||
+        path.isJSXNamespacedName()
       ) {
         return;
       }
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/input.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/input.js
new file mode 100644
index 000000000000..7adc443ec2b5
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/input.js
@@ -0,0 +1,7 @@
+function AComponent () {
+  return <BComponent/>
+
+  function BComponent () {
+    return <n:CComponent />
+  }
+}
diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/output.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/output.js
new file mode 100644
index 000000000000..cb7a21986516
--- /dev/null
+++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/namespace/output.js
@@ -0,0 +1,9 @@
+var _n$CComponent;
+
+function AComponent() {
+  return <BComponent />;
+
+  function BComponent() {
+    return _n$CComponent || (_n$CComponent = <n:CComponent />);
+  }
+}