🧠 State of Mind: Learning React State Without Losing Yours

Hey there, fellow developer! 👋
Hassani here — your not-so-expert, always-curious, proudly #learningInPublic explorer! 😄
Welcome (or welcome back!) to my chaotic little corner of the dev universe — GoCoding, where we learn together, break things on purpose (and sometimes completely by accident 🫣💀), and grow like champs (eventually 😭).

Today’s blog is all about something that used to make my brain do backflips:
🧠 React state — what it is, why it matters, how to use it, and all those little things you wish someone had explained with patience, emojis, and a decent amount of chill 😌.

This is a full beginner-friendly journey, starting right at the beginning:

• 🧩 Components (what even are they?)

• 🧠 State and why it exists

• ⚙️ How useState() works

• 🧼 The secret power of immutability

• 🧬 Derived state (don’t store what you can calculate!)

• 🏋️ Lifting state up to a common parent

• 🧭 When to use state — and when not to

• ✨ Advice, tips, and state wisdom

• 📝 A cute lil quiz at the end

• 🫶 Plus links to learn even more

Grab your drink of choice ☕🥤, open up your editor (or just chill here), and let’s learn about state like besties. Let’s goooooooo 🚀✨

🧩 Understanding Components

Before we talk about state, let’s talk about the foundation of every React app: components.

A component is just a JavaScript function that returns some UI (using JSX — which looks like HTML but has powers 💪). Think of components as LEGO blocks 🧱 — each one is a small part of the UI that you can reuse, rearrange, and nest inside others.

It’s kind of like assembling IKEA furniture — each component has its own little purpose, and when you put them together just right, you get a beautiful piece of UI. But forget one tiny screw (or prop), and suddenly your app is wobbling and making weird noises.

Been there actually — my bookshelf’s still judging me from the corner, slightly tilted but full of sass.😅

Anyways, here goes and example of a component:

function Hello() {
  return <h1>Hello, world! 🌍</h1>;
}

You can use this inside another component:

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

Even better, components can talk to each other by passing props — little pieces of data they hand off like secret notes in class. 📝

But don’t worry if that sounds mysterious — we’ll break down props in another blog very soon. Like, it’s already brewing. ☕

For now, just know they exist. Like this:

function Welcome({ name }) {
  return <p>Welcome, {name}! 🎉</p>;
}

function App() {
  return (
    <div>
      <Welcome name="Hassani" />
      <Welcome name="Reader" />
    </div>
  );
}

This keeps your code clean, reusable, and fun to work with. But there’s one problem… these components are static. They don’t remember anything. 😐

It’s like me trying to make coffee in the morning — standing in the kitchen like, “Wait… do I add water first or coffee??” 💀 Every. single. time. No memory, no caffeine, just vibes and mild panic.

That’s where state comes in!

🧠 What Is State and Why Do We Need It?

State is like a component’s short-term memory. It helps your app remember things and update the UI when something changes — like a button being clicked, a checkbox being checked, or a new item being added to a list.

Without state, all you get are static screens. Great for displaying stuff, not so great for interaction….boooring 😴 I know.

Imagine:

• A counter that ticks up when you click

• A form that remembers what you typed

• A dark mode toggle

• A shopping cart with items

💡 For all of that, you need state.

⚙️ Using useState() — The State Hook

React gives us a special function called a hook to use state in functional components. (But hold your horses 🐎 and hide your panic — we’re not diving into hooks just yet.
We’ll get there soon, I promise. For now, let’s just understand what state even is without getting tangled in curly braces and parentheses.) The one we use most? useState().

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      You clicked me {count} times!
    </button>
  );
}

what’s happening here then? 😨

Here, let’s look at this step by step:

• count is your state variable — what you’re keeping track of.

• setCount is the setter function that updates it.

• useState(0) sets the initial value to 0.

Every time the button is clicked, setCount() updates the value, and React re-renders the component to reflect the new state.

📦 State Can Hold Anything!

State isn’t just for numbers! You can store all kinds of data types like:

• Strings: useState("Hello")

• Booleans: useState(true)

• Objects: useState({ name: "Hassani" })

• Arrays: useState([])

It is like mom’s bag — an absolute mystery of the universe. Inside, you’ll find snacks, tissues, receipts from 2007, a mini first-aid kit, five random keys, chewing gum from a parallel dimension, and somehow... your entire childhood medical records.

It’s basically a black hole in a handbag — and state is just like that. It holds whatever your component needs to remember, no matter how weird or random.

Example:

const [user, setUser] = useState({ name: "Hassani", age: 25 });

setUser(prev => ({
  ...prev,
  age: 26
}));

This brings us to one of the most important parts of using state correctly... 🧼

🧼 Immutability — Don’t Mutate, Create ✨

Let’s talk about a golden rule in React:
Never change state directly. Always return a new version of it. 🧠

Why? Because React knows something has changed only when the value looks different. If you mutate it (change it in place), React might not see that anything changed — and your UI won’t update. 😬

It’s kind of like trying to prank someone by rearranging their desk but putting everything back in the exact same place. They walk in, look around, and go, “Uhh… looks normal to me.”

React’s the same — unless the change is obvious, it won’t react (pun 100% intended 😎).

❌ This is bad:

user.age = 30;

✅ This is good:

setUser(prev => ({ ...prev, age: 30 }));

We use the spread operator (...) to copy the old object and then override the part we want to change.

What? You seriously want me to get into the spread operator right now? 😩 Not today, champ. We'll save that magic trick for another blog. For now, just nod, smile, and pretend it makes sense…or don’t actually look it up — Google is free, honey 💅

We’ll cover it properly in another post, but for now, just know it helps us update state without breaking React’s heart.

🧬 Derived State — Don’t Store What You Can Calculate

Let’s say we’re storing a list of items, and we want to show how many are “packed.”

You don’t need a separate state for that!

Seriously, just create a regular variable and derive the value from existing state. No need to hoard state like it’s toilet paper in 2020 🧻

If you can calculate it from state, you probably don’t need to store it in state. Keep it clean, keep it simple.

const packedCount = items.filter(item => item.packed).length;

This is called derived state — values that can be calculated from other state or props.

💡 Rule: If you can compute something from existing state, don’t store it separately. Just derive it.

🏋️ Lifting State Up

Sometimes, two sibling components need to share the same state. For example:

• A form that adds an item

• A list that shows all items

Each of these needs to read or update the same data — so we lift that state up to their common parent and pass it down as props (aka the data we hand from parent to child components).

What’s a prop? Just a fancy word for a value you pass into a component.
Don’t worry about it too much — future-you will totally get it. 😌 …or maybe you already know it which is cool 😁

function App() {
  const [items, setItems] = useState([]);

  function handleAddItem(item) {
    setItems(prev => [...prev, item]);
  }

  return (
    <>
      <Form onAddItem={handleAddItem} />
      <List items={items} />
    </>
  );
}

Now Form can add to the list, and List can display it — all thanks to lifted state. 🏆

Just out of curiosity… do you even lift, bro? 💪 (State, obviously.)

🧭 When (and When Not) to Use State

Here’s a quick decision tree for state:

✅ Use state when:

• You need to remember something between renders

• The value changes based on user interaction

• The UI needs to reflect that change

❌ Avoid state when:

• The value is static or hardcoded

• It can be calculated from other state (→ use derived state)

• It only needs to be shown once and never updated

📍 Also: Always place your useState() at the top of your component, before any logic or JSX. Hooks love structure. Unlike me, fr — I do not thrive in structured environments 😭

But hooks? They’re picky. They need to be called in the same order, in the top level of your component, and never inside conditions or loops. React’s like, “Follow the rules or no hook for you!”

I guess dictatorship is good sometimes…but having no choice is insane tho ngl 💀

✨ Tips & Advice for Managing State

Listen… I don’t usually give advice. Shakes head Nope. Especially not for free.
Even if you held a gun to my head — you still wouldn’t get free advice out of me 💀.

But when I do? Please, pay attention.
It’s not a threat — it’s from the heart. 💔

Like seriously, you can’t just scroll past someone pouring their soul out like it’s nothing.
What happened to shame?? Have some respect.

That’s fatherless behavior. 😤

Anyway. Now that we’ve established the emotional weight of this moment...
Let’s talk about managing state.

Here is my advice on managing state:

• ✅ Keep state close to where it’s used

• ✅ Use clear names like items, setItems

• ✅ Avoid “mega states” — split into smaller ones if needed

• ✅ Use the functional form: setState(prev => ...) to avoid bugs

• ✅ Install React DevTools to see your state live in your browser 🔥

📝 Quick Quiz Time!

Alright, enough from me — now it’s your time to shine 🌟
Let’s see if you were actually paying attention or just here for the jokes 👀
No pressure… but I will be silently judging from behind the screen.

Test yourself! Drop your answers in the comments 👇

1. What is state in React and what is it used for?

2. What does useState() return?

3. Why should you never update state directly?

4. What is derived state? Give an example.

5. What does it mean to "lift state up"?

6. What’s the correct way to update a value based on the previous one?

🎉 Wrapping It Up

Whew! 🎈
You made it to the end, and you’ve learned a ton. From the basics of components to managing local state, lifting it, deriving it, and keeping it immutable — this was a deep (but friendly!) dive into React state.

Give yourself a big ol’ round of applause 👏
You deserve it.

📚 References & More Learning

• React Docs – State

• React Docs – useState

• Kent C. Dodds – Application State Management

🫶 Thank You For Reading!

TThanks for sticking around, friend! 💖
I hope this guide made React state feel less like a horror movie and more like a cozy coding rom-com.

Got questions? Answers? Mild emotional breakdowns? Drop them in the comments — I accept all forms of communication (except smoke signals, I’m allergic to effort).
And hey, what should we cover next? useEffect()? Forms? Or do we finally build a tiny project together and pretend we have our lives together?

Until then…
Stay curious. Stay cozy. And keep aggressively Googling.

— Hassani 🧡
Your proudly #learningInPublic developer and part-time bug whispererr