[DevTools] fix useDeferredValue to match reconciler change

[mondaychen]

Summary

resolves #24623

According to #24247 the original implementation only existed for a few days (18.0.0), so we'll stick to the new one

How did you test this change?

Tested by adding useDeferredValue(''); in List.js in react-devtools-shell

[acdlite]

Do you mind updating the test in ReactHooksInspectionIntegration-test.js (or adding a new one) so that it fails before your fix is applied?

[sizebot]

Comparing: 229c86a...3446694

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	131.76 kB	131.76 kB	=	42.31 kB	42.31 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	137.03 kB	137.03 kB	=	43.90 kB	43.90 kB
facebook-www/ReactDOM-prod.classic.js	=	441.06 kB	441.06 kB	=	80.67 kB	80.67 kB
facebook-www/ReactDOM-prod.modern.js	=	426.37 kB	426.37 kB	=	78.48 kB	78.48 kB
facebook-www/ReactDOMForked-prod.classic.js	=	441.84 kB	441.84 kB	=	80.91 kB	80.91 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+0.40%	6.79 kB	6.82 kB	+0.16%	2.51 kB	2.52 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+0.40%	6.79 kB	6.82 kB	+0.16%	2.51 kB	2.52 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+0.40%	6.79 kB	6.82 kB	+0.16%	2.51 kB	2.52 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	=	22.68 kB	22.51 kB	=	5.98 kB	5.98 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	=	22.68 kB	22.51 kB	=	5.98 kB	5.98 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	=	22.68 kB	22.51 kB	=	5.98 kB	5.98 kB

Generated by 🚫 dangerJS against 3446694

[lunaruan]

@mondaychen Can you add a test to address Andrew's comments in this PR? 😊

[mondaychen]

OK I've updated a test, when running with the old code, you get the following error:

● ReactHooksInspectionIntegration › should support useDeferredValue hook

    expect(received).toEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 1

    @@ -9,11 +9,11 @@
        Object {
          "id": 1,
          "isStateEditable": false,
          "name": "Memo",
          "subHooks": Array [],
    -     "value": 1,
    +     "value": 2,
        },
        Object {
          "id": 2,
          "isStateEditable": false,
          "name": "Memo",

      582 |     const childFiber = renderer.root.findByType(Foo)._currentFiber();
      583 |     const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
    > 584 |     expect(tree).toEqual([
          |                  ^
      585 |       {
      586 |         id: 0,
      587 |         isStateEditable: false,

      at Object.<anonymous> (packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js:584:18)

This is because calling nextHook twice will cause the first memo to be reading second memo

With new code it should pass.

Should I do the same for other composite hooks?

[mondaychen]

Another way to expose the issue more quickly, is that whenever we get a null from nextHook(), we just throw since it's not expected. Would that be too aggressive and might cause other issues?