Day 2 of #100DaysofCode — Understanding React State

Source: Dev.to

Understanding React State

Today marks the 2nd day of my 100 Days of Code journey. The goal was to understand what state is in React and how useState works. React state can feel abstract when you’re learning it, so let’s use a simple restaurant analogy to make state, re‑renders, and interactivity easier to grasp.

Restaurant Analogy

• State = the current order on a customer’s table.
  • Example order:
    • Burger
    • Pizza
    • Coke

The order can change at any time. In React, state tells a component what it should display right now, just like an order tells a waiter what food should be on the table.

Without state, a React component would be like a table that always shows the same dish, regardless of what the customer asks for.

What State Enables

• Dynamic UI
• Changing data
• Responding to user actions

Just as a waiter updates the table based on new orders, a React component updates when its state changes.

How State Works in React

When a user interacts (e.g., “Add fries,” “Change drink”), the order changes. In React this looks like:

• Click a button
• Type in an input
• Toggle something

These actions trigger state updates, which cause the component to re‑render.

Batching and Scheduling

State updates are not applied instantly. Similar to a waiter who:

1. Writes down the new order
2. Sends it to the kitchen
3. Updates the table when the food is ready

React batches and schedules changes for smoother performance.

State Updates and Re‑renders

1. State changes (e.g., “pizza → pasta”)
2. React re‑renders the component
3. The UI refreshes to show the new state

This ensures the table (UI) always reflects the current order (state), never outdated dishes.

• Re‑rendering = refreshing what’s on the table based on the latest order.
• Every change triggers a fresh, updated display.

Key Takeaways

• State = the current order on a table.
• State changes = customer updating their order.
• Interactivity = customer actions updating what’s served.
• State updates are asynchronous because they are scheduled efficiently.
• Each state change triggers a re‑render, keeping the UI in sync with the latest state.

If you liked this breakdown, follow along — this was Day 2 of my 100 Days of Code.