What is useEffect in React - Why It Matters

The Big Idea

Discover how React's useEffect saves you from endless manual updates and bugs!

The Scenario

Imagine you want to update the page every time a user clicks a button or when data loads from the internet. You try to write code that watches for these changes and updates the page manually.

The Problem

Manually tracking changes and updating the page is tricky and easy to forget. You might miss updates or cause bugs by updating too often or too late. It becomes a mess as your app grows.

The Solution

useEffect lets React automatically run your code when something changes, like data loading or user actions. It keeps your app in sync without you having to watch everything yourself.

Before vs After

✗ Before

componentDidMount() { fetchData(); }
componentDidUpdate(prevProps) { if (prevProps.id !== this.props.id) fetchData(); }

✓ After

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

What It Enables

It enables you to run code at the right time, keeping your app responsive and clean without extra hassle.

Real Life Example

Loading user info from a server whenever the user ID changes, so the page always shows the right data.

Key Takeaways

Manually syncing code with changes is hard and error-prone.

useEffect runs code automatically when dependencies change.

This keeps your app updated and easier to manage.

Practice

1. What is the primary purpose of useEffect in React?

easy

A. To declare state variables inside a component

B. To create new components dynamically

C. To run code after the component renders or when data changes

D. To style components with CSS

Solution

1. Step 1: Understand what useEffect does

   useEffect runs code after the component renders or when specified data changes.

2. Step 2: Compare with other React features

   State variables declare data, styling is CSS, and creating components is unrelated to useEffect.

3. Final Answer:

   To run code after the component renders or when data changes -> Option C

4. Quick Check:

   useEffect runs code after render or data change [OK]

Hint: useEffect runs after render or data updates [OK]

Common Mistakes:

• Confusing useEffect with useState
• Thinking useEffect styles components
• Believing useEffect creates components

2. Which of the following is the correct syntax to use useEffect that runs only once after the first render?

easy

A. useEffect(() => { console.log('Hello'); });

B. useEffect(() => { console.log('Hello'); }, []);

C. useEffect(() => { console.log('Hello'); }, true);

D. useEffect(() => { console.log('Hello'); }, null);

Solution

1. Step 1: Identify how to run useEffect once

   Passing an empty array [] as dependency makes useEffect run only once after the first render.

2. Step 2: Check other options

   Without dependencies (useEffect(() => { console.log('Hello'); });), it runs after every render. Options B and C pass non-array values, causing the effect to run after every render (with a React warning).

3. Final Answer:

   useEffect(() => { console.log('Hello'); }, []); -> Option B

4. Quick Check:

   Empty dependency array means run once [OK]

Hint: Empty array runs useEffect once after first render [OK]

Common Mistakes:

• Omitting dependency array causes repeated runs
• Passing non-array values thinking it runs once
• Confusing [] with null or true

3. What will be logged to the console when this component runs?

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Count is:', count);
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>Increment</button>
  );
}

medium

A. Logs 'Count is: 0' and then logs updated count each time button clicked

B. Logs 'Count is: 0' once after first render only

C. Logs nothing because useEffect has no dependencies

D. Causes an infinite loop of logs

Solution

1. Step 1: Understand useEffect with [count] dependency

   The effect runs after first render and every time count changes, logging the current count.

2. Step 2: Analyze button click behavior

   Clicking the button increases count, triggering useEffect to log the new value.

3. Final Answer:

   Logs 'Count is: 0' and then logs updated count each time button clicked -> Option A

4. Quick Check:

   useEffect runs on count change, logging each update [OK]

Hint: useEffect runs after render and on dependency change [OK]

Common Mistakes:

• Thinking useEffect runs only once without empty array
• Believing no logs happen without empty array
• Assuming infinite loops without setCount inside useEffect

4. Identify the problem in this code snippet using useEffect:

useEffect(() => {
  fetchData();
}, fetchData);

Assume fetchData is a function defined outside.

medium

A. No problem, this code is correct

B. fetchData cannot be called inside useEffect

C. useEffect must not have any dependencies

D. Dependency array should be an array, not a function

Solution

1. Step 1: Check dependency argument type

   The second argument to useEffect must be an array listing dependencies, not a function.

2. Step 2: Identify correct syntax

   It should be [fetchData] if fetchData is a dependency, not just fetchData alone.

3. Final Answer:

   Dependency array should be an array, not a function -> Option D

4. Quick Check:

   useEffect dependencies must be an array [OK]

Hint: Dependency argument must be an array, not a function [OK]

Common Mistakes:

• Passing a function instead of an array as dependencies
• Ignoring dependency array causing repeated runs
• Thinking useEffect cannot call functions

5. You want to fetch user data only once when a component mounts and clean up a subscription when it unmounts. Which useEffect pattern is correct?

useEffect(() => {
  const subscription = subscribeToUserData();
  fetchUserData();
  return () => {
    subscription.unsubscribe();
  };
}, []);

hard

A. This pattern correctly fetches once and cleans up on unmount

B. Missing dependency array causes multiple fetches

C. Cleanup function should not be returned inside useEffect

D. Subscription should be created inside cleanup function

Solution

1. Step 1: Check dependency array usage

   Empty array [] ensures effect runs once on mount and cleanup on unmount.

2. Step 2: Verify cleanup function correctness

   Returning a function that unsubscribes cleans up resources properly when component unmounts.

3. Final Answer:

   This pattern correctly fetches once and cleans up on unmount -> Option A

4. Quick Check:

   Empty array + cleanup function = run once + cleanup [OK]

Hint: Empty array runs once; return cleanup function for unmount [OK]

Common Mistakes:

• Omitting cleanup function causing memory leaks
• Not using empty array causing repeated fetches
• Placing subscription inside cleanup function incorrectly