Avoid too many useStates in React — Fix unnecessary rerenders

I’ve been making such a mistake for a very long time. Any value that changed instantly joined the state. It was similar to the React method. However, as the app grew, it became more difficult to forget about its drawbacks.

A re-render is not necessary for every value. React ends up doing more work than is necessary while everything is in state. Even when there is no real reason to change the user interface, components re-render. This eventually causes performance problems that are difficult to link to a single line of code.

Additionally, I faced stale closure problems several times. State changes, particularly inside effects and event handlers, didn’t act as I thought they would.

Bad Code Example:

Fix Code Version :