From 97a2fc1955d249bd79035a4446a87fc39e35e949 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 18 Aug 2021 18:26:57 -0400
Subject: [PATCH] [DevTools] Using array destructuring without assigning first
 variable does not error (#22129)

## Summary

Before this commit, if a hook returned an array the was destructured, but without assigning a variable to the first element in the array, this would produce an error. This was detected via internal testing.

This commit fixes that and adds regression tests.


## Test Plan

- yarn flow
- yarn test
- yarn test-build-devtools
- added new regression tests
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).
---
 .../__source__/__untransformed__/ComponentWithUseState.js      | 3 ++-
 .../src/__tests__/parseHookNames-test.js                       | 2 +-
 packages/react-devtools-extensions/src/astUtils.js             | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
index cf50881bd87b3..91b77db04097c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
@@ -14,7 +14,8 @@ function Component(props) {
   const [foo] = useState(true);
   const bar = useState(true);
   const [baz] = React.useState(true);
+  const [, forceUpdate] = useState();
   return `${foo}-${bar}-${baz}`;
 }
 
-module.exports = {Component};
\ No newline at end of file
+module.exports = {Component};
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index f7e340df20b7a..bba4a78b10470 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -95,7 +95,7 @@ describe('parseHookNames', () => {
     const Component = require('./__source__/__untransformed__/ComponentWithUseState')
       .Component;
     const hookNames = await getHookNamesForComponent(Component);
-    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz', null]);
   });
 
   it('should parse names for useReducer()', async () => {
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 072dc9a6179c0..3b2e8c52d1025 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -271,7 +271,7 @@ function getHookVariableName(
   const nodeType = hook.node.id.type;
   switch (nodeType) {
     case AST_NODE_TYPES.ARRAY_PATTERN:
-      return !isCustomHook ? hook.node.id.elements[0].name : null;
+      return !isCustomHook ? hook.node.id.elements[0]?.name ?? null : null;
 
     case AST_NODE_TYPES.IDENTIFIER:
       return hook.node.id.name;