useState vs Class Component State: What's Different?

useState vs Class Component State: What's Different?

useState and class component state solve the same problem, holding data that changes, but they work differently. Here is the comparison.

How Class State Worked

In class components, state lived in a single object called this.state. You updated it with this.setState, which merged the new values into the existing state object.

How useState Works

useState gives you a separate state variable and setter for each piece of state. There is no single state object; you call useState once per value. Updating replaces the value entirely rather than merging.

Merge vs Replace

A key difference: this.setState merges the new fields into the existing state object. useState replaces the value. So with objects in useState, you must spread the old fields manually.

The Mental Model

Class state bundled everything into one object. useState encourages small, focused state variables, which are easier to reason about and update independently.

Lifecycle vs Hooks

Class components used lifecycle methods like componentDidMount to run side effects. Functional components use useEffect, which combines mounting, updating, and unmounting into one API.

this Is Gone

Class components relied on this, which confused beginners and caused binding issues. Functional components with hooks have no this, which removes a whole category of bugs.

Which to Use

Use useState in functional components for all new code. Understand class state only to read older code and answer interview questions.

The Takeaway

useState replaces class state with focused, independent variables and no this. It replaces merging behavior with replacement, so you spread objects manually. It is simpler and less error-prone than class state.