From Theory to Practice: Understanding useEffect, Dependency Array, and Search Issues

In the React lecture, I studied the theory of useEffect and especially the dependency array.
At that time, it felt okay okay: whenever a value in the dependency array changes, the effect runs again.

Today, while implementing a movie search feature using the OMDB API, I finally understood how powerful (and tricky) this concept is in real projects.

---

Implementing the Search Feature

I created a search input and used useEffect to fetch movies whenever the query value changes.

useEffect(() => {
  fetchMovies();
}, [query]);

According to the theory, this was correct.
Every time the user types something new, query changes, and the API call runs again.

---

The Problem I Faced 🚨

When I typed slowly, everything worked fine.
But when I typed fast, the movie I was searching for sometimes did not appear, or the results felt incorrect.

At first, this was confusing because:

There was no syntax error

The API was working

The logic looked correct

So why was this happening?

---

Understanding the Real Issue (Race Condition)

After debugging, I realized that when I type fast:

Multiple API requests are sent almost at the same time

Older requests sometimes finish after newer ones

React updates the UI with outdated data

This situation is called a race condition.

In simple words:

The browser does not guarantee that responses will come back in the same order as requests.

---

The Solution: Cancelling Old Requests

To fix this, I used AbortController inside useEffect.

The idea is simple:

When query changes

Cancel the previous API request

Allow only the latest request to update the UI

This made the search feature stable, even when typing very fast.

---

What I Learned 📌

This small bug taught me an important lesson:

useEffect theory is easy

Real problems appear during implementation

Dependency array + async code can create unexpected behavior

Proper cleanup inside useEffect is very important

---

Final Takeaway

Fast user input + API calls = special handling required

In future projects, whenever I build:

Search bars

Filters

Autocomplete features

I will always think about:

Race conditions

Effect cleanup

Cancelling outdated requests

This experience helped me truly understand useEffect beyond theory — exactly what good learning should feel like.