Week 12 React Learning Recap – Late Upload, Night Shifts, and Deep Understanding of useEffect & JSX Data Flow

Uploading this weekly recap on Tuesday instead of Monday has almost become a pattern for me.
And before anyone judges the delay, I want to explain why this keeps happening — honestly and clearly.

This blog is not just a weekly update.
It’s a reflection of learning React while managing night shifts, fatigue, and mental pressure.

Why I Keep Uploading My Weekly Blog Late

After completing a Sunday night shift, I come home on Monday morning completely exhausted.
The first thing I do is sleep — because my body and mind are both drained.

When I wake up again at night and finish my meal, I immediately start coding.
That’s where the real challenge begins.

• There is pressure to use the rest day productively
• If some concepts from the previous week were not fully clear, I have to revisit and relearn them
• Compared to normal days, this becomes more time-consuming and mentally exhausting

Because of this cycle, it often becomes 12 AM or even 1 AM,
and by then I’m so tired that writing a blog feels impossible.

Even if I upload the blog at that time, it is still technically counted as a Tuesday post.
The problem is not discipline — the problem is fatigue, recovery, and mental load, and I accept that reality.

Week 12 Overview – Continuing the usePopcorn React Project

In Week 12, my main focus remained the usePopcorn React project.
The project is still ongoing, but right now the goal is not just building UI —
the real goal is to understand React core concepts through real-world code.

React Concepts I Worked on This Week

• Key & Prop in React
• Rules for Render Logic
• State Update Batching
• Events Handling in React
• Libraries vs Frameworks
• Component Lifecycle
• Fetching Data from APIs
• 💖 useEffect hook
• Understanding data flow in JSX

Below, I’m explaining these concepts using relevant code snippets, not the entire project code.

Key & Prop in React – Helping React Identify Elements

While rendering the movie list, I realized that the key prop is not just for removing warnings.
It plays a major role in React’s reconciliation and performance optimization.

{movies.map(movie => (
  <Movie
    key={movie.imdbID}
    movie={movie}
    onSelectMovie={handleSelectMovie}
  />
))}

Using a stable and unique value like imdbID helps React understand
which list item has changed and which hasn’t.

Rules for Render Logic – Writing Clean JSX

This project taught me that not everything belongs inside JSX.
Separating logic from UI makes components more readable and maintainable.

{isLoading && <Loading />}
{!isLoading && !error && <MovieList movies={movies} />}
{error && <ErrorMessage message={error} />}

This structure clearly defines
what should render in each state without adding unnecessary complexity.

State Update Batching – How React Optimizes Performance

Earlier, I believed every setState call immediately triggered a re-render.
This week, I learned that React uses state update batching.

setIsLoading(true);
setError("");

React groups these updates together and performs a single render,
which helps avoid unnecessary performance costs.

Events in React – Understanding One-Way Data Flow

Handling events helped me better understand React’s one-way data flow.

<input
  value={query}
  onChange={(e) => setQuery(e.target.value)}
/>

User input → state update → UI re-render
This predictable flow makes React applications easier to debug and reason about.

Libraries vs Frameworks – Why React Feels Flexible

While working on this project, I clearly felt why React is called a library, not a framework.

• Routing is my decision
• Data fetching is my decision
• Project structure is my responsibility

This flexibility forces me to think like a developer, not just follow rules.

Component Lifecycle & 💖 useEffect Hook

The strongest learning of Week 12 was understanding the useEffect hook.

useEffect(() => {
  async function fetchMovies() {
    const res = await fetch(url);
    const data = await res.json();
    setMovies(data.Search);
  }

  if (query.length < 3) return;
  fetchMovies();
}, [query]);

Through this, I understood:

• Component renders first
• Side effects run after render
• Effects re-run when dependencies change

With cleanup logic like AbortController,
React can cancel previous API requests — which is critical for real applications.

Understanding Data Flow in JSX

Earlier, I struggled to explain this concept properly.
Now it’s becoming clearer.

In JSX, I control data flow using conditions,
so the UI always reflects the current application state.

{selectedId ? (
  <MovieDetails selectedId={selectedId} />
) : (
  <WatchedMovieList watched={watched} />
)}

This shows that:

• Data flows from parent to child
• State decides which component renders
• The UI is always state-driven, never random

Final Thoughts – Late Upload, Deep Learning

Yes, I’m late.
Yes, this weekly recap is published on Tuesday.

But this week, I didn’t just write React code —
I understood React more deeply.

The usePopcorn project is still in progress,
and I know it is teaching me how real-world React applications are built.

Next week will also be challenging,
but I’m not stopping —
I’m just moving forward at my own pace.

Week 12 completed. ✅
Moving toward Week 13. 🚀