🐛 useExhaustiveDependencies error on JSON.stringify as dep.

[Rados51]

Environment information

CLI:
  Version:                      1.3.1
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v21.0.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "pnpm/8.9.2"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    true
  VCS disabled:                 true

Workspace:
  Open Documents:               0

What happened?

1. Insert JSON.stringify as useMemo dependency.
2. It throws This hook do not specify all of its dependencies. and This hook specifies more dependencies than necessary. error.

https://biomejs.dev/playground/?code=aQBtAHAAbwByAHQAIAB7ACAAdQBzAGUAUwB0AGEAdABlACwAIAB1AHMAZQBFAGYAZgBlAGMAdAAgAH0AIABmAHIAbwBtACAAJwByAGUAYQBjAHQAJwA7AAoACgBlAHgAcABvAHIAdAAgAGMAbwBuAHMAdAAgAEMAbwBtAHAAbwBuAGUAbgB0ACAAPQAgACgAKQAgAD0APgAgAHsACgAgACAAYwBvAG4AcwB0ACAAWwBvAGIAagBlAGMAdABDAG8AbgB0AGUAbgB0AF0AIAA9AAoAIAAgACAAIAB1AHMAZQBTAHQAYQB0AGUAPAB7AGQAYQB0AGEAOgAgAHMAdAByAGkAbgBnAH0APgAoAHsAZABhAHQAYQA6ACAAIgBuAG8AbgBlACIAfQApADsACgAKACAAIAB1AHMAZQBFAGYAZgBlAGMAdAAoACgAKQAgAD0APgAgAHsACgAgACAAIAAgAGMAbwBuAHMAbwBsAGUALgBsAG8AZwAoAG8AYgBqAGUAYwB0AEMAbwBuAHQAZQBuAHQAKQA7AAoAIAAgAH0ALAAgAFsASgBTAE8ATgAuAHMAdAByAGkAbgBnAGkAZgB5ACgAbwBiAGoAZQBjAHQAQwBvAG4AdABlAG4AdAApAF0AKQA7AAoACgAgACAAcgBlAHQAdQByAG4AIABvAGIAagBlAGMAdABDAG8AbgB0AGUAbgB0ADsACgB9ADsACgA%3D

Expected result

It should show no error.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[nissy-dev]

Why do you think it should show no error？ In my side, eslint-plugin-react-hooks show error, so it should show error.

[Rados51]

@nissy-dev

The first statement (from both Biome and ESLint plugin) is wrong. Dependency is not missing, it is specified in just "a different way".

The only correct way of using objects as dependency in useMemo/useEffect is to convert it to either string or hash it in other ways as comparing objects will never result in true. Using an object will result in re-render every single time, and it would be the same as using useMemo/useEffect without dependencies.

In the case of eslint-plugin-react-hooks both statements are wrong. I guess that second statement could be resolved like const staticDep = JSON.stringify(originalObject);, but that would create an unnecessary variable in memory.

[ematipico]

@Rados51

If you think it's a valid bug, you should file an issue to their repository, after all it's maintained by the react core team.

The intention of Biome 's rule is to replicate as much as possible from the original rule, and not deviate from it. Happy to resume the discussion once this is solved.

[GabenGar]

Dependency is not missing, it is specified in just "a different way".

There is no "different way", objectContent and the result of JSON.stringify(objectContent) are two different references and react only checks for referential equality.

[Rados51]

Dependency is not missing, it is specified in just "a different way".

There is no "different way", objectContent and the result of JSON.stringify(objectContent) are two different references and react only checks for referential equality.

This is why passing objectContent to hook dependency will always result as false as console.log({a:1}==={a:1}); // false

[GabenGar]

Only if you change the reference with the action provided by the useState() hook or the state is derived exclusively within the component, such as in your example.
The point is the deps array doesn't do advanced introspection for value comparison and neither can the linter.