chore(babel): drop @babel/plugin-transform-destructuring plugin

packages/babel-preset-expo/CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### 💡 Others
 
+- Remove unused `@babel/plugin-transform-destructuring` plugin on all platforms. ([#27885](https://github.com/expo/expo/pull/27885) by [@EvanBacon](https://github.com/EvanBacon))
 - Remove unused peer dependency on `@babel/preset-env`. ([#27705](https://github.com/expo/expo/pull/27705) by [@EvanBacon](https://github.com/EvanBacon))
 - Disable color in snapshot tests in CI. ([#27301](https://github.com/expo/expo/pull/27301) by [@EvanBacon](https://github.com/EvanBacon))
 - Add additional tests for undefined platform minification behavior. ([#27515](https://github.com/expo/expo/pull/27515) by [@EvanBacon](https://github.com/EvanBacon))

packages/babel-preset-expo/src/__tests__/index.test.ts

@@ -41,6 +41,10 @@ var obj = {
   bar: "bar"
 };
 
+// @babel/plugin-transform-destructuring
+var { x, y } = { x: "x", y: "y" };
+var [a, b, ...c] = [1, 2, 3];
+
 // @babel/plugin-transform-shorthand-properties
 var a1 = 0;
 var c = { a1 };

packages/babel-preset-expo/src/__tests__/jsx-import.test.ts

@@ -184,22 +184,26 @@ it(`supports nested React components in destructured props in Metro + developmen
 
   expect(code).toMatch(/"react\/jsx-dev-runtime"/);
   expect(code).toMatch(/var _this = this;/);
-  expect(code).toMatch(/var _ref\$button/);
+  const lines = code!.split('\n');
+  expect(lines.findIndex((line) => line.match(/_this = this;/))).toBeLessThan(
+    lines.findIndex((line) => line.match(/_this\);/))
+  );
   expect(code).toMatchInlineSnapshot(`
     "var _jsxDevRuntime = require("react/jsx-dev-runtime");
     var _jsxFileName = "/unknown";
     function Foo(_ref) {
       var _this = this;
-      var _ref$button = _ref.button,
-        button = _ref$button === void 0 ? function () {
+      var {
+        button = function () {
           return /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(Text, {
             children: "Foo"
           }, void 0, false, {
             fileName: _jsxFileName,
             lineNumber: 4,
             columnNumber: 14
           }, _this);
-        } : _ref$button;
+        }
+      } = _ref;
       return /*#__PURE__*/(0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, {
         children: button()
       }, void 0, false);

packages/babel-preset-expo/src/index.ts

@@ -107,7 +107,11 @@ function babelPresetExpo(api: ConfigAPI, options: BabelPresetExpoOptions = {}):
   }
 
   if (platformOptions.unstable_transformProfile == null) {
-    platformOptions.unstable_transformProfile = engine === 'hermes' ? 'hermes-stable' : 'default';
+    // Using hermes canary will disable the destructuring transform. Disabling this transform reduces
+    // an additional import on a babel helper in every file with destructuring, i.e. `useState`.
+    // This may have outstanding performance regressions for development Hermes.
+    // Ref: https://github.com/facebook/react-native/pull/43662
+    platformOptions.unstable_transformProfile = engine === 'hermes' ? 'hermes-canary' : 'default';
   }
 
   // Note that if `options.lazyImports` is not set (i.e., `null` or `undefined`),