fix: Don't hoist JSX elements referencing mutable variables (#13054)

issue-13051

Co-authored-by: Clint Goodman <clintgoodman@workfront.com>

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

@@ -64,13 +64,17 @@ export default declare((api, options) => {
       // Ignore identifiers & JSX expressions.
       if (
         path.isJSXIdentifier() ||
-        path.isIdentifier() ||
         path.isJSXMemberExpression() ||
         path.isJSXNamespacedName()
       ) {
         return;
       }
 
+      if (path.isIdentifier()) {
+        const binding = path.scope.getBinding(path.node.name);
+        if (binding && binding.constant) return;
+      }
+
       if (!path.isImmutable()) {
         // If it's not immutable, it may still be a pure expression, such as string concatenation.
         // It is still safe to hoist that, so long as its result is immutable.

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable-complex/output.mjs

@@ -1,5 +1,3 @@
-var _span;
-
 let foo = 'hello';
 
 const mutate = () => {
@@ -8,5 +6,5 @@ const mutate = () => {
 
 export const Component = () => {
   if (Math.random() > 0.5) mutate();
-  return _span || (_span = <span>{foo}</span>);
+  return <span>{foo}</span>;
 };

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/deopt-mutable/output.mjs

@@ -1,7 +1,5 @@
-var _span;
-
 let foo = 'hello';
 export const Component = () => {
   foo = 'goodbye';
-  return _span || (_span = <span>{foo}</span>);
+  return <span>{foo}</span>;
 };

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/for-loop/input.js

@@ -0,0 +1,10 @@
+function render() {
+    const nodes = [];
+
+    for(let i = 0; i < 5; i++) {
+        nodes.push(<div>{i}</div>)
+    }
+
+    return nodes;
+}
+  

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/for-loop/output.js

@@ -0,0 +1,10 @@
+function render() {
+  const nodes = [];
+
+  for (let i = 0; i < 5; i++) {
+    nodes.push(<div>{i}</div>);
+  }
+
+  return nodes;
+}
+  

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/global-reference/output.js

@@ -1,7 +1,5 @@
-var _div;
-
 var Foo = React.createClass({
   render: function render() {
-    return _div || (_div = <div foo={notDeclared}></div>);
+    return <div foo={notDeclared}></div>;
   }
 });