Today marks the 2nd day of my 100 Days of Code journey. Today, the goal was to understand what is state in React and how does the useState works in React. React state can feel abstract when you’re learning it. So let's understand it in a simple restaurant analogy that makes state, re-renders, and interactivity easy to understand.
What Is “State” in React?
State = the current order on a customer’s table.
At a restaurant, a table might currently have an order like:
- Burger
- Pizza
- Coke
That order can change anytime.
In React, state tells the component what it should display right now, just like an order tells a waiter what food should be on the table.
But the question rises,
Why Do Functional Components Even Need State?
A restaurant table’s order changes throughout the meal.
Without state, a React component would be like a table that always shows the same dish, no matter what the customer asks for.
State allows:
- Dynamic UI
- Changing data
- Responding to user actions
Just like a waiter updates the table based on new orders.
How Does State Make Components Interactive?
When a customer interacts (e.g., “Add fries,” “Change drink”), the order changes.
In React:
- Click a button
- Type in an input
- Toggle something
→ State updates
→ Component updates
It’s like a waiter updating the table whenever the customer requests something.
Ok, So That Means State Is Asynchronous?
Yes.
React updates state after a short delay, not instantly.
Restaurant analogy:
You tell the waiter:
“Change my order from pizza to pasta.”
The waiter doesn’t teleport the pasta onto your table. They:
- write it down
- send it to the kitchen
- update the order when ready
React does the same: it batches and schedules changes for smoother performance.
How Does Updating State Re-render a Component?
When the order on a table changes, the food on the table changes too.
React does this:
- State updates (“pizza → pasta”)
- React re-renders the component
- UI refreshes to show the new state
It’s like replacing the old dish with the new one.
Why Does the UI Always Show the Latest State?
Because the table should always show the current order, not old dishes customers no longer want.
React guarantees the UI is always synced with the latest state value.
What Is Re-rendering in React?
Re-rendering = refreshing what’s on the table based on the latest order.
New order → new dish
New state → new UI
Every change triggers a fresh, updated display.
So, To Summarize
- State = the current order on a table
- State changes = customer updating their order
- Interactivity = customer actions updating what’s served
- State is async because updates are scheduled efficiently
- State change triggers re-render (new dish served)
- UI always matches the latest order
If you liked this breakdown, follow along — this was Day 2 of my 100 Days of Code.