[DevTools] Hook names are correctly extracted when parsing nested hook calls (facebook#22037)

## Summary

This commit fixes an issue where DevTools would currently not correctly extract the hook names for a hook call when the hook call was nested under *another* hook call, e.g.:

```javascript
function Component() {
  const InnerComponent = useMemo(() => () => {
    const [state, setState] = useState(0);

    return state;
  }); 
  return null;
};
```

Although it seems pretty rare to encounter this case in actual product code, DevTools wasn't handling it correctly:

**Expected Names:**
- `InnerComponent` for the `useMemo()` call.
- `state` for the `useState()` call.

**Actual**
- `InnerComponent` for the `useMemo()` call.
- `InnerComponent` for the `useState()` call.

The reason that we were extracting the name for the nested hook call incorrectly is that the `checkNodeLocation` function (which attempts to check if the location of the hook matches the location in the original source code), was too "lenient" and would return a match even if the start lines of the locations didn't match.

Specifically, for our example, it would consider that the location of the outer hook call "matched" the location of the inner hook call (even though they were on different lines), and would then return the wrong hook name.


### Fix

The fix in this commit is to update the `checkNodeLocation` function to more strictly check for matching start lines. The assumption here is that if 2 locations are on different starting lines, they can't possibly correspond to the same hook call.

## Test Plan

- yarn flow
- Tests still pass
  - yarn test
  - yarn test-build-devtools
- new regression tests added
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally). 
![image](https://user-images.githubusercontent.com/1271509/128409571-d62e0a74-6b7b-4c3f-ad86-6799ecd71962.png)

![image](https://user-images.githubusercontent.com/1271509/128409943-f898f27b-67ab-4260-a931-40d9c1942395.png)

![image](https://user-images.githubusercontent.com/1271509/128410326-79a0f822-55b1-4b90-a9b9-78f13fa0b5c5.png)

Author: Juan

packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithNestedHooks.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {useMemo, useState} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+
+    return state;
+  });
+  props.callback(InnerComponent);
+
+  return null;
+}
+
+module.exports = {Component};

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {useMemo, useState} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+
+    return state;
+  });
+  props.callback(InnerComponent);
+ 
+  return null;
+};
+
+module.exports = {Component};

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map

@@ -11,6 +11,7 @@ export {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksI
 export {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';
 export {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';
 export {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';
+export {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';
 export {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';
 export {Component as Example} from './Example';
 export {Component as InlineRequire} from './InlineRequire';

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js

@@ -152,6 +152,20 @@ describe('parseHookNames', () => {
     expectHookNamesToEqual(hookNames, ['count', 'darkMode', 'isDarkMode']);
   });
 
+  it('should parse names for code using nested hooks', async () => {
+    const Component = require('./__source__/__untransformed__/ComponentWithNestedHooks')
+      .Component;
+    let InnerComponent;
+    const hookNames = await getHookNamesForComponent(Component, {
+      callback: innerComponent => {
+        InnerComponent = innerComponent;
+      },
+    });
+    const innerHookNames = await getHookNamesForComponent(InnerComponent);
+    expectHookNamesToEqual(hookNames, ['InnerComponent']);
+    expectHookNamesToEqual(innerHookNames, ['state']);
+  });
+
   it('should return null for custom hooks without explicit names', async () => {
     const Component = require('./__source__/__untransformed__/ComponentWithUnnamedCustomHooks')
       .Component;
@@ -261,6 +275,35 @@ describe('parseHookNames', () => {
       ); // simulated Webpack 'cheap-module-source-map'
     });
 
+    it('should work when code is using nested hooks', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        let InnerComponent;
+        const hookNames = await getHookNamesForComponent(Component, {
+          callback: innerComponent => {
+            InnerComponent = innerComponent;
+          },
+        });
+        const innerHookNames = await getHookNamesForComponent(InnerComponent);
+        expectHookNamesToEqual(hookNames, [
+          'InnerComponent', // useMemo()
+        ]);
+        expectHookNamesToEqual(innerHookNames, [
+          'state', // useState()
+        ]);
+      }
+
+      await test('./__source__/__compiled__/inline/ComponentWithNestedHooks'); // inline source map
+      await test('./__source__/__compiled__/external/ComponentWithNestedHooks'); // external source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ComponentWithNestedHooks',
+      ); // bundle source map
+      await test(
+        './__source__/__compiled__/no-columns/ComponentWithNestedHooks',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
     it('should work for external hooks', async () => {
       async function test(path, name = 'Component') {
         const Component = require(path)[name];

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map

@@ -36,7 +36,7 @@ function checkNodeLocation(
 ): boolean {
   const {start, end} = path.node.loc;
 
-  if (line < start.line || line > end.line) {
+  if (line !== start.line) {
     return false;
   }