It is unfortunate JS doesn't have better capabilities for dealing with immutable data. This is the one major flaw in the React ecosystem. It is quite easy to make this mistake (even with lint rules) and to avoid it in a statically-enforceable way you need a lot of userland cruft that is just not viable to do.
It gets even worse when you start to pass values down several layers of components when the average advice on the web is "don't overuse useMemo". For those unfamiliar it is a way to memoize a value so you get a stable reference that is only mutated if the underlying data mutates, it basically avoids this specific issue.
React wants you to code in functional immutable style, but the language doesn't provide proper immutable data structures.
have_faith · 51m ago
These types of issues have to be the largest footguns in the react architecture. Relying so heavily on the linter to avoid the initial dependency mismatch issues and then on memoising to avoid the re-triggering can really feel like dancing on eggshells.
It gets even worse when you start to pass values down several layers of components when the average advice on the web is "don't overuse useMemo". For those unfamiliar it is a way to memoize a value so you get a stable reference that is only mutated if the underlying data mutates, it basically avoids this specific issue.
React wants you to code in functional immutable style, but the language doesn't provide proper immutable data structures.