Learning to code? One key concept in React is how to track and update information in your app. This is called state management. Don’t let the jargon scare you! Here’s a simple explainer even a 10 year old could understand.

What is State in React?

State is just data that changes over time. For example, in a game app, state could be:

• The player's current score

• How many lives they have left

• Whether the game is paused or not

As the player earns points, loses lives, or pauses the game, this state data will change.

React uses state to keep track of data like this in your app.

Updating State in React

Here's the #1 rule of state in React:

You should never modify state directly!

Instead, React gives you a special method called setState(). You call setState() whenever you want to update state.

For example, if you wanted to increase the player’s score in a game app, you would:

// Wrong
this.state.score = this.state.score + 100; 

// Right  
this.setState({
  score: this.state.score + 100
});

Calling setState() triggers React to update what's on the screen.

It’s like taking a new “snapshot” of your app!

Why Immutability Matters

The key reason you shouldn’t modify state directly is something called “immutability”.

Immutable means unchangeable. Instead of directly changing state, React wants you to generate new state.

This makes your app more predictable and less buggy. Your old state works like a history book - you can look back and see what changed!

So remember the golden rule: don’t modify state, generate new state! Your future self will thank you.