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

Why I Keep Uploading My Weekly Blog Late ## Week 12 Overview – Continuing the usePopcorn React Project ## React Concepts I Worked on This Week ## Key & Prop in React – Helping React Identify Elements ## Rules for Render Logic – Writing Clean JSX ## State Update Batching – How React Optimizes Performance ## Events in React – Understanding One-Way Data Flow ## Libraries vs Frameworks – Why React Feels Flexible ## Component Lifecycle & 💖 useEffect Hook ## Understanding Data Flow in JSX ## Final Thoughts – Late Upload, Deep Learning 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. 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. 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. 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. Below, I’m explaining these concepts using relevant code snippets, not the entire project code. 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. Using a stable and unique value like imdbID helps React understand which list item has changed and which hasn’t. This project taught me that not everything belongs inside JSX. Separating logic from UI makes components more readable and maintainable. This structure clearly defines what should render in each state without adding unnecessary complexity. Earlier, I believed every setState call immediately triggered a re-render. This week, I learned that React uses state update batching. React groups these updates together and performs a single render, which helps avoid unnecessary performance costs. Handling events helped me better understand React’s one-way data flow. User input → state update → UI re-render This predictable flow makes React applications easier to debug and reason about. While working on this project, I clearly felt why React is called a library, not a framework. This flexibility forces me to think like a developer, not just follow rules. The strongest learning of Week 12 was understanding the useEffect hook. Through this, I understood: With cleanup logic like AbortController, React can cancel previous API requests — which is critical for real applications. 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. 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. 🚀 Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: {movies.map(movie => ( <Movie key={movie.imdbID} movie={movie} onSelectMovie={handleSelectMovie} /> ))} Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: {movies.map(movie => ( <Movie key={movie.imdbID} movie={movie} onSelectMovie={handleSelectMovie} /> ))} COMMAND_BLOCK: {movies.map(movie => ( <Movie key={movie.imdbID} movie={movie} onSelectMovie={handleSelectMovie} /> ))} CODE_BLOCK: {isLoading && <Loading />} {!isLoading && !error && <MovieList movies={movies} />} {error && <ErrorMessage message={error} />} Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: {isLoading && <Loading />} {!isLoading && !error && <MovieList movies={movies} />} {error && <ErrorMessage message={error} />} CODE_BLOCK: {isLoading && <Loading />} {!isLoading && !error && <MovieList movies={movies} />} {error && <ErrorMessage message={error} />} CODE_BLOCK: setIsLoading(true); setError(""); Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: setIsLoading(true); setError(""); CODE_BLOCK: setIsLoading(true); setError(""); COMMAND_BLOCK: <input value={query} onChange={(e) => setQuery(e.target.value)} /> Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: <input value={query} onChange={(e) => setQuery(e.target.value)} /> COMMAND_BLOCK: <input value={query} onChange={(e) => setQuery(e.target.value)} /> COMMAND_BLOCK: useEffect(() => { async function fetchMovies() { const res = await fetch(url); const data = await res.json(); setMovies(data.Search); } if (query.length < 3) return; fetchMovies(); }, [query]); Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: useEffect(() => { async function fetchMovies() { const res = await fetch(url); const data = await res.json(); setMovies(data.Search); } if (query.length < 3) return; fetchMovies(); }, [query]); COMMAND_BLOCK: useEffect(() => { async function fetchMovies() { const res = await fetch(url); const data = await res.json(); setMovies(data.Search); } if (query.length < 3) return; fetchMovies(); }, [query]); CODE_BLOCK: {selectedId ? ( <MovieDetails selectedId={selectedId} /> ) : ( <WatchedMovieList watched={watched} /> )} Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: {selectedId ? ( <MovieDetails selectedId={selectedId} /> ) : ( <WatchedMovieList watched={watched} /> )} CODE_BLOCK: {selectedId ? ( <MovieDetails selectedId={selectedId} /> ) : ( <WatchedMovieList watched={watched} /> )} - 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 - 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 - Routing is my decision - Data fetching is my decision - Project structure is my responsibility - Component renders first - Side effects run after render - Effects re-run when dependencies change - Data flows from parent to child - State decides which component renders - The UI is always state-driven, never random