Things to Watch Out for When Managing an Object with useState in React

If you manage an object with useState in React, always create a brand-new object and pass it in when you call setState.

If you only change a property of the existing object and pass it as the argument to setState, useEffect won’t detect the change. React recognizes a diff by comparing objects based on their reference identity. Since it’s the same object, the reference is the same, so React thinks nothing has changed.

codeSandBox example https://codesandbox.io/s/react-use-state-watch-class-l7r54?file=/src/App.tsx

20211220