[DevTools Bug]: Negative infinity is serialized and shown as `Infinity`

[mart3323]

Website or app

https://547s6w.csb.app/

Repro steps

1. Inspect the Example component (h1 element)
2. Look at the hook values reported by the devtools
   Expected: The first hook, with a value of -Infinity, should be shown as minus infinity
   Actual: Both infinities render as just Infinity

Note: "Store as global variable" will capture the correct value

Reproduced using Opera \w devtools 6.1.1 from revision 44c3d3d
Codesandbox: https://codesandbox.io/p/sandbox/beautiful-lake-547s6w

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

[sumit9000]

This issue appears to be a React DevTools bug where -Infinity is incorrectly displayed as Infinity. Since "Store as global variable" captures the correct value, the issue is likely due to how React DevTools formats and renders values in the UI.

---

Possible Causes & Solutions

1. Confirm the Bug in Multiple Browsers

• Try Chrome, Firefox, Edge to see if the issue persists.
• If it only happens in Opera, it might be related to Opera's DevTools version.

2. Use console.log for Debugging

• Log the values inside your component to see if -Infinity is correctly represented.

  console.log("Hook Value:", hookValue);

• If the console logs -Infinity correctly, then the issue is only with React DevTools UI rendering.

3. Check if It's a Known Issue in React DevTools

• React DevTools might be incorrectly formatting -Infinity.
• Search the official GitHub issues page:
  • 🔍 [React DevTools Issues](https://github.com/facebook/react-devtools/issues)

4. Patch the Issue with Custom Formatters

Since the bug is in DevTools formatting, you can try forcing -Infinity to display correctly:

window.devtoolsFormatters = [
  {
    header: (obj) => (obj === -Infinity ? ["span", { style: "color:red" }, "-Infinity"] : null),
    hasBody: () => false,
  },
];

This won't fix React DevTools but will help in the console.

5. Report the Bug to React DevTools

If this is not yet reported, you can file a bug report on:

• [React DevTools GitHub](https://github.com/facebook/react/issues)

---

Workaround Until Fixed

If you need a quick fix while debugging:

• Use JSON.stringify(hookValue) before displaying:

  console.log("Hook Value:", JSON.stringify(hookValue));

• Use a custom formatter to detect -Infinity and display it correctly.

---

[mart3323]

To address the points in the previous comment

Details

1. Confirm the Bug in Multiple Browsers

• Try Chrome, Firefox, Edge to see if the issue persists.
• If it only happens in Opera, it might be related to Opera's DevTools version.

Happens on Firefox and Chrome on my work PC, as well as Firefox, Chrome, Opera, and Edge on my home PC. I am convinced this is not browser-specific

2. Use console.log for Debugging

• Log the values inside your component to see if -Infinity is correctly represented.
  console.log("Hook Value:", hookValue);
• If the console logs -Infinity correctly, then the issue is only with React DevTools UI rendering.

The values themselves are correct. it is only rendered as -Infinity in the react-devtools specifically

3. Check if It's a Known Issue in React DevTools

• React DevTools might be incorrectly formatting -Infinity.
• Search the official GitHub issues page:
  • 🔍 [React DevTools Issues](https://github.com/facebook/react-devtools/issues)

I searched both repos, did not find matching issues. (NB: The link here is deprecated, react-devtools was merged into the main react repo)

4. Patch the Issue with Custom Formatters

Since the bug is in DevTools formatting, you can try forcing -Infinity to display correctly:

window.devtoolsFormatters = [
  {
    header: (obj) => (obj === -Infinity ? ["span", { style: "color:red" }, "-Infinity"] : null),
    hasBody: () => false,
  },
];

This won't fix React DevTools but will help in the console.

This relates to browser devtools. The values render correctly in browser devtools already

Additionally, the problem is knowing that this is an issue in the first place. As a user, if i see Infinity in the devtools, i have no reason to suspect it might actually be -Infinity under the hood.

5. Report the Bug to React DevTools

If this is not yet reported, you can file a bug report on:

* [[React DevTools GitHub](https://github.com/facebook/react/issues)](https://github.com/facebook/react/issues)

👋 Agreed, in fact this is the bug report

Workaround Until Fixed

If you need a quick fix while debugging:

* Use **`JSON.stringify(hookValue)`** before displaying:
  console.log("Hook Value:", JSON.stringify(hookValue));

* Use a **custom formatter** to detect `-Infinity` and display it correctly.

Browser devtools already shows the correct values - patching it does not affect react-devtools preview.

Additional results

I just got the local/development build running, and i was able to reproduce this in react-devtools-shell by adding
-Infinity as an extra prop into SimpleValues

packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js

@@ -25,6 +25,7 @@
         null={null}
         nan={NaN}
         infinity={Infinity}
+        minusInfinity={-Infinity}
         true={true}
         false={false}
         function={noop}

I was then able to "fix" the issue by making the following changes

1. Serialize negative infinity to {type: '-infinity'}
   (This prevents -Infinity from turning into Infinity when sent from the page into the devtools)

packages/react-devtools-shared/src/devtools/utils.js

 export type DataType =
   | 'array'
   | 'array_buffer'
   | 'bigint'
   | 'boolean'
   | 'class_instance'
   | 'data_view'
   | 'date'
   | 'function'
   | 'html_all_collection'
   | 'html_element'
   | 'infinity'
+  | '-infinity'
   | 'iterator'
   | 'opaque_iterator'
   | 'nan'
   | 'null'
   | 'number'
   | 'object'
   | 'react_element'
   | 'regexp'
   | 'string'
   | 'symbol'
   | 'typed_array'
   | 'undefined'
   | 'unknown';

 /**
  * Get a enhanced/artificial type string based on the object instance
  */
 export function getDataType(data: Object): DataType {
   if (data === null) {
     return 'null';
   } else if (data === undefined) {
     return 'undefined';
   }

   if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {
     return 'html_element';
   }

   const type = typeof data;
   switch (type) {
     case 'bigint':
       return 'bigint';
     case 'boolean':
       return 'boolean';
     case 'function':
       return 'function';
     case 'number':
       if (Number.isNaN(data)) {
         return 'nan';
       } else if (!Number.isFinite(data)) {
-        return 'infinity';
+        if (data > 0) {
+          return 'infinity';
+        } else {
+          return '-infinity'
+        }
       } else {
         return 'number';
       }

packages/react-devtools-shared/src/devtools/utils.js

 /**
  * Strip out complex data (instances, functions, and data nested > LEVEL_THRESHOLD levels deep).
  * The paths of the stripped out objects are appended to the `cleaned` list.
  * On the other side of the barrier, the cleaned list is used to "re-hydrate" the cleaned representation into
  * an object with symbols as attributes, so that a sanitized object can be distinguished from a normal object.
  *
  * Input: {"some": {"attr": fn()}, "other": AnInstance}
  * Output: {
  *   "some": {
  *     "attr": {"name": the fn.name, type: "function"}
  *   },
  *   "other": {
  *     "name": "AnInstance",
  *     "type": "object",
  *   },
  * }
  * and cleaned = [["some", "attr"], ["other"]]
  */
 export function dehydrate(
   data: Object,
   cleaned: Array<Array<string | number>>,
   unserializable: Array<Array<string | number>>,
   path: Array<string | number>,
   isPathAllowed: (path: Array<string | number>) => boolean,
   level: number = 0,
 ): $PropertyType<DehydratedData, 'data'> {
   const type = getDataType(data);

   let isPathAllowedCheck;

   switch (type) {

*** ... omitted content ... ***

     case 'infinity':
+    case '-infinity':
     case 'nan':
     case 'undefined':
       // Some values are lossy when sent through a WebSocket.
       // We dehydrate+rehydrate them to preserve their type.
       cleaned.push(path);
       return {type};

     default:
       return data;
   }
 }

 export function hydrate(
   object: any,
   cleaned: Array<Array<string | number>>,
   unserializable: Array<Array<string | number>>,
 ): Object {
   cleaned.forEach((path: Array<string | number>) => {
     const length = path.length;
     const last = path[length - 1];
     const parent = getInObject(object, path.slice(0, length - 1));
     if (!parent || !parent.hasOwnProperty(last)) {
       return;
     }

     const value = parent[last];

     if (!value) {
       return;
     } else if (value.type === 'infinity') {
       parent[last] = Infinity;
+    } else if (value.type === '-infinity') {
+      parent[last] = -Infinity;
     } else if (value.type === 'nan') {
       parent[last] = NaN;
     } else if (value.type === 'undefined') {
       parent[last] = undefined;
     } else {
       // Replace the string keys with Symbols so they're non-enumerable.
       const replaced: {[key: symbol]: boolean | string} = {};
       replaced[meta.inspectable] = !!value.inspectable;
       replaced[meta.inspected] = false;
       replaced[meta.name] = value.name;
       replaced[meta.preview_long] = value.preview_long;
       replaced[meta.preview_short] = value.preview_short;
       replaced[meta.size] = value.size;
       replaced[meta.readonly] = !!value.readonly;
       replaced[meta.type] = value.type;

       parent[last] = replaced;
     }
   });

2. Update smartParse and smartStringify to support -Infinity
   (This prevents -Infinity from becoming "Infinity" when stringified for display

packages/react-devtools-shared/src/devtools/utils.js

 export function smartParse(value: any): any | void | number {
   switch (value) {
+    case '-Infinity':
+      return -Infinity;
     case 'Infinity':
       return Infinity;
     case 'NaN':
       return NaN;
     case 'undefined':
       return undefined;
     default:
       return JSON5.parse(sanitizeForParse(value));
   }
 }

 export function smartStringify(value: any): string {
   if (typeof value === 'number') {
     if (Number.isNaN(value)) {
       return 'NaN';
     } else if (!Number.isFinite(value)) {
-      return 'Infinity';
+      if (value > 0) {
+        return 'Infinity';
+      } else {
+        return '-Infinity';
+      }
     }
   } else if (value === undefined) {
     return 'undefined';
   }

   return JSON.stringify(value);
 }

[hoxyq]

@mart3323, thanks for reporting this. The changes that you described in the comment above totally make sense.

Would you be able to publish a PR with some tests?

[mart3323]

I could try, but right now I'm having some trouble running the full test suite.

For a long time it was unable to finish because it would consume all my available memory (32GB).
For the last few attempts it started working again, but gives a couple failures each run (different tests each time)

For example, my last run:

my last run

Summary of all failing tests
 FAIL  packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
  ● ReactHooksInspection › should inspect use() calls in anonymous loops

    expect(received).toMatchInlineSnapshot(snapshot)

    Snapshot name: `ReactHooksInspection should inspect use() calls in anonymous loops 1`

    - Snapshot  -  1
    + Received  + 17

    @@ -20,10 +20,26 @@
            },
            "id": null,
            "isStateEditable": false,
            "name": "Use",
            "subHooks": [],
    -       "value": Promise {},
    +       "value": Promise {
    +         Symbol(async_id_symbol): 131864,
    +         Symbol(trigger_async_id_symbol): 131852,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +         Symbol(kResourceStore): undefined,
    +       },
          },
        ],
        "value": undefined,
      }

      735 |     const results = normalizeSourceLoc(tree);
      736 |     expect(results).toHaveLength(1);
    > 737 |     expect(results[0]).toMatchInlineSnapshot(`
          |                        ^
      738 |       {
      739 |         "debugInfo": null,
      740 |         "hookSource": {

      at Object.<anonymous> (packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js:737:24)


Snapshot Summary
 › 1 snapshot failed from 1 test suite. Inspect your code changes or run `yarn test -u` to update them.

Test Suites: 1 failed, 327 passed, 328 total
Tests:       1 failed, 23 skipped, 6785 passed, 6809 total
Snapshots:   1 failed, 334 passed, 335 total
Time:        48.155 s, estimated 51 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Similar results for yarn test-build-devtools. The first time it passed (aside from the 58 skipped tests). But on a second run it had a test fail

second run

Summary of all failing tests
 FAIL  packages/react-devtools-shared/src/__tests__/editing-test.js
  ● editing interface › context › [GATED, SHOULD FAIL] should enable adding new object properties and array values

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/martj/WebstormProjects/react/build/oss-experimental/react-dom/cjs/react-dom-client.development.js:11198
              ((state !== newApiName || oldState !== lane) ¦&
                                                           

    SyntaxError: Invalid or unexpected token

      35 |   module.exports = require('./cjs/react-dom-client.production.js');
      36 | } else {
    > 37 |   module.exports = require('./cjs/react-dom-client.development.js');
         |                    ^
      38 | }
      39 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (build/oss-experimental/react-dom/client.js:37:20)
      at Object.<anonymous> (packages/react-devtools-shared/src/__tests__/utils.js:193:22)


Test Suites: 1 failed, 1 skipped, 41 passed, 42 of 43 total
Tests:       1 failed, 58 skipped, 453 passed, 512 total
Snapshots:   554 passed, 554 total
Time:        27.022 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It might be a hardware issue (i think my memory might be bad, i've had other mysterious recurring issues as well).
I'll try running it on a different computer later, and if i can pass the tests there i'll submit a PR.
edit: Still getting flaky results on a different PC