Why useEffect hook in React Native? - Purpose & Use Cases

The Big Idea

Discover how to make your React Native app smarter and smoother with just one hook!

The Scenario

Imagine you have a React Native app where you want to fetch data from the internet every time the screen loads or update the title when a value changes. You try to do this by manually calling functions inside your component body or using timers everywhere.

The Problem

Manually managing side effects like data fetching or event listeners inside components is tricky. It can cause repeated calls, memory leaks, or updates at the wrong time. Your app might slow down or behave unpredictably.

The Solution

The useEffect hook lets you tell React Native exactly when to run your side effects. It runs code after rendering and cleans up automatically, keeping your app efficient and bug-free.

Before vs After

✗ Before

fetchData(); // called every render
setTitle(value); // no control when this runs

✓ After

useEffect(() => {
  fetchData();
  setTitle(value);
}, [value]);

What It Enables

You can easily synchronize your app with external data and events without messy code or bugs.

Real Life Example

Loading user profile info from a server when a screen opens, and updating it only when the user ID changes.

Key Takeaways

Manually handling side effects causes bugs and inefficiency.

useEffect runs code at the right time after rendering.

It cleans up automatically and keeps your app smooth.