Misconception: "Separate useState is faster"

Reality: When state changes, React renders.

So, separate useState vs a single useState doesn't typically improve performance.

In either case, when any state changes, React renders.

These 2 approaches are often the same perf:

So generally, I prefer unified state:

- It's less code.
- It groups related values which improves readability.
- It typically simplifies client-server interactions. The JSON received from the server can easily be used as the default value, and easily sent back to the server later. Separate useState calls mean we have to deconstruct and reconstruct the object to interact with a server.

That said, I consider separating state for performance reasons in rare cases where it helps (for example, when unified state leads to needless expensive renders in child components).

But I generally prefer splitting large forms into separate steps to resolve performance issues.

Or, if I'm forced to implement a single long form, I consider using uncontrolled inputs via useRef, or a forms library that supports uncontrolled inputs.

View original on X