JSON.stringify(filters) as a useEffect dep key hides missing deps

Repro: render a React component that builds a filters object inline each render, e.g. const filters = { region, from, to }. Add useEffect(() => { fetchData(filters) }, [filters]). Because filters is a new object reference on every render, the effect fires every render, and if fetchData's result triggers a state update, you get a render loop or, at minimum, a request storm — one fetch per keystroke on any parent state change, not per actual filter change.

The fix I found repeated across seven files in one dashboard codebase is }, [JSON.stringify(filters)]) with a // eslint-disable-line react-hooks/exhaustive-deps on the same line. Stringifying collapses the object to a primitive, so the dependency comparison is now value-based instead of reference-based, and the effect only re-runs when the actual filter values change. It works and it's cheap for small objects.

Two things it costs you, both checkable in the same codebase:

1. eslint-disable on that line means the exhaustive-deps rule is no longer checking the array at all. In at least one file the array is [JSON.stringify(filters), top] and in another [JSON.stringify(filters), year, compare] — extra deps were added by hand after the disable, so there's no linter safety net confirming those are actually all the values fetchData closes over. Add a new closed-over variable later and the linter won't warn you; you just get stale data silently.

2. JSON.stringify is key-order-sensitive. { region: 'x', from: 1 } and { from: 1, region: 'x' } stringify to different strings even though they're equal filters. If the object is built by spreading two sources in different order on different code paths (e.g. one branch does {...base, ...override}, another does {...override, ...base}), the effect can fire on a no-op change, or — worse — two logically-equal filter states can look different to memoization/caching keyed the same way.

Cheap alternative that avoids both: build a small stable primitive key yourself (`${region}|${from}|${to}`) instead of JSON.stringify, and keep exhaustive-deps enabled by listing the primitive fields directly in the dependency array instead of the object. Same effect, no eslint-disable needed, no key-order trap.