📘 Week 13 – The Week React Started Feeling Real

If I’m being honest, this week was not easy.

Up until now, React felt like something I was using. But in Week 13, React started feeling like something I was finally understanding.

This week was all about Effects, and Effects are not just a feature — they are a different way of thinking.

I worked on my usePopcorn project, and this week it went from “just a UI” to a real application that:

• Fetches data from an API
• Updates the browser tab title
• Cleans up event listeners
• Handles race conditions
• Saves data to localStorage
• And actually behaves like a professional app

And honestly… my brain hurt 😅 But in a good way.

---

🧠 The Big Realization: React Is Not About “Doing Things”

Before this week, my mindset was:

“I click → I do something → I update state”

But React’s mindset is:

“When state changes → React reacts → Effects run”

That’s a huge mental shift.

---

⚡ What is useEffect (In My Own Words)?

useEffect is how you tell React:

“When something changes, synchronize something outside React.”

Like:

• Fetching data from API
• Changing document.title
• Using localStorage
• Adding event listeners
• Talking to the browser

Basic shape:

useEffect(() => {
  // side effect
}, [dependencies]);

---

🏷️ 1. Changing the Page Title (And Why It Felt Magical)

In my movie app, when I open a movie, the tab title changes:

useEffect(() => {
  if (!title) return;
  document.title = `Movie | ${title}`;

  return () => {
    document.title = "usePopcorn";
  };
}, [title]);

💡 This was the moment I felt:

“Okay… this is no longer a toy app.”

I finally understood:
React is controlling even the browser now.

---

🧹 2. Cleaning Up Effects (The Thing Everyone Forgets)

I learned a very important professional habit:

If you add something, you must remove it.

In MovieDetails, I listen for Escape key:

useEffect(() => {
  function handleKey(e) {
    if (e.code === "Escape") onCloseMovie();
  }

  document.addEventListener("keydown", handleKey);

  return () => {
    document.removeEventListener("keydown", handleKey);
  };
}, [onCloseMovie]);

If I don’t clean this, my app will:

• Add listeners again and again
• Become slower
• Behave randomly
• Turn into a bug factory 🐛

This is real-world engineering discipline.

---

🧨 3. Race Conditions (The Bug That Looks Like Magic)

This one was scary.

When I type fast in search:

• Many requests go out
• Old responses come back late
• Newer results get replaced by old data

The fix:

const controller = new AbortController();

// pass controller.signal to fetch
// and cleanup:
return () => controller.abort();

💡 I learned:

The browser is asynchronous. The network is chaotic.
You must defend your app.

This is next-level frontend engineering.

---

💾 4. Syncing State with localStorage

My watched list now persists:

useEffect(() => {
  localStorage.setItem("watched", JSON.stringify(watched));
}, [watched]);

This taught me something deep:

State can control external systems.

React is not just UI. It’s a state machine for the whole app.

---

🧪 5. The Currency Converter Challenge

This challenge forced me to:

• Think in effects
• Think in dependencies
• Think in synchronization
• Stop writing “do this” code
• Start writing “when this changes” code

At first, my solution was buggy.
Then I fixed one effect. Then another.
And slowly… it clicked.

---

📏 6. Rules of Hooks (The Laws of React)

This week also burned these rules into my brain:

• ❌ No hooks in if
• ❌ No hooks in loops
• ❌ No hooks in nested functions
• ✅ Only at top level
• ✅ Only in React components or custom hooks

Now I finally understand why these rules exist:
Because React relies on call order, not names.

---

🧩 7. useState – The Real Summary

Before, I thought:

“useState is just a variable”

Now I know:

“useState is a trigger for a re-render and a memory cell for the component.”

Also:

• Don’t store derived state
• Don’t fight React
• Let state describe UI, not control it

---

😵 My Honest Struggle This Week

There were moments when:

• My app broke
• My effect ran infinite times
• My UI flickered
• My data was wrong
• My brain said: “Why is this so complex?”

But then I realized:

I am no longer learning basic React.
I am learning real-world React.

---

🚀 Why This Week Changed Me

Before this week, I was building components.

After this week, I am building systems.

• Systems that sync with browser
• Systems that sync with network
• Systems that clean themselves
• Systems that survive real users

---

= 🏁 Final Thoughts

Week 13 was:

• Less fun
• More mental pressure
• More bugs
• More confusion

But also:

• More growth
• More confidence
• More “I actually understand this” moments

---

If Week 12 taught me how React looks,
Week 13 taught me how React lives.

And honestly?

This is the week I started feeling like a real frontend developer.

Comments

[Aaron Rose]

nice one, usama! 💯

[Usama]

Thanks Aaron 😺