Today I finally understood what makes React so powerful — state.
It’s not just a variable — it’s what gives your app memory, personality, and life.
Once you realize that your UI is just a reflection of state, React suddenly clicks.
⚛️ What I Built
I created a small component that shows three steps:
- Learn React ⚛️
- Apply for jobs đź’Ľ
- Invest your new income 🤑
It includes “Next” and “Previous” buttons to move through steps, and a close button to hide the section.
Using useState, I learned how to control what appears on screen based on the component’s state.
🧩 Key Lessons I Learned
1. Update State Based on Current State
When updating a value using its previous value, always pass a function to the setter:
setStep((s) => s + 1);
That ensures React always uses the latest version of state — even with multiple updates.
2. One Component = One State
Every component has its own state — completely independent from others.
Even if you render the same component multiple times, each one “remembers” its own state.
3. UI as a Function of State
The best way to think about React is:
🖥️ UI = f(state)
Whenever your state changes, React re-renders the UI to match.
No manual DOM manipulation — React handles it automatically.
4. When to Use State
Use useState for data that should change over time or control the UI, like:
- Whether a modal is open
- Which step the user is on
- A toggle or input field
If a value doesn’t affect what the user sees, use a normal variable instead — not state.
🧠My Practical Guidelines About State
👉 Use state for anything dynamic.
👉 Never mutate state directly — always use the setter function.
👉 Imagine your UI changing with time as state evolves.
👉 Avoid unnecessary state — static data doesn’t need it.
đź’¬ Final Thoughts
Understanding state changed the way I see React.
It’s not just about re-renders — it’s about thinking in terms of state transitions.
Now, every time I build something dynamic, I ask myself:
“How should my component look when this piece of state changes?”
And that’s when React truly starts to feel alive. ⚡
🚀 What’s Next
I’ll keep experimenting with multiple states in one component and later explore Context and Reducers to manage complex state.
Top comments (2)
This is such a great milestone! ⚛️
The moment you realize “UI = f(state)” is truly when React starts making sense. Keep building — Context and Reducers will make the next lightbulb turn on even brighter 💡
Nice post