Today was a special day for me. It was a holiday, and instead of wasting time, I finally understood useEffect properly — not just how to write it, but why we use it and how it works in real applications.
This wasn’t just theory. Today I learned how to:
Fetch data from an API
Use async / await inside useEffect
Handle errors with try...catch
Show loading and error UI
Understand the component lifecycle in React
And honestly… I’m very happy 😊
🔄 Understanding useEffect in Simple Words
Before today, useEffect felt confusing.
Now I understand it like this:
useEffect runs code after the component is rendered.
In my case, I wanted to fetch movies from the OMDB API when the app loads. That’s a side effect, and React gives us useEffect exactly for this purpose.
When the component mounts:
useEffect runs
Data is fetched
UI updates automatically
This clicked today 💡
🌐 Fetching Data with async / await
Inside useEffect, I learned that:
You cannot make the effect function itself async
Instead, you create an async function inside it and call it
This pattern finally makes sense now.
The flow in my head is:
Start loading
Fetch data from API
Convert response to JSON
Update state with movies
Stop loading
Simple and clean.
🛑 Error Handling (Very Important!)
Today I also learned something very practical: APIs can fail.
So I used try...catch to handle problems like:
Network issues
Invalid responses
Movie not found
Instead of crashing the app, I now:
Catch the error
Save the error message in state
Show a friendly error message in the UI
This feels good 😌
⏳ Loading State = Better User Experience
Another big lesson:
Never leave the user guessing.
While data is loading, I show a loading spinner. When something goes wrong, I show a clear error message. When everything works, I show the movie list.
This taught me how conditional rendering works together with useEffect.
♻️ Component Lifecycle (Now I Get It)
Today I finally understood the lifecycle in a practical way:
Mount → component appears → fetch data
Update → state changes → UI updates
Unmount → cleanup (I’ll learn this next 😉)
useEffect helped me see this lifecycle instead of memorizing it.
🧠 What I Learned Today (Quick Summary)
Today’s topic gave me confidence because I learned:
💖 useEffect is for side effects
🌐 How to fetch data correctly
⚠️ Real error handling with try...catch
⏳ Loading states matter
♻️ How React components live and update
This was not just code — it was understanding.
Top comments (0)