Lifecycle of Reactive Effects

In React, useEffect is a hook used to handle side effects—such as API calls, setting up timers, or updating the DOM—when a component renders. "Reactive Effects" means these effects react to changes in state or props, and they follow a lifecycle: setup, execution when needed, and cleanup when no longer required.

Simply put:

useEffect acts like an "assistant" that automatically runs code when a component mounts, when state/props change, and cleans up when the component is removed.
Its lifecycle consists of: setup → re-run (if dependencies change) → cleanup.

Lifecycle of useEffect

1. Setup

When a component is mounted into the DOM, useEffect runs for the first time to set up the side effect.
The code inside useEffect executes after every render.

2. Cleanup

If you return a function from useEffect (called a cleanup function), it runs:
- Before the effect re-runs (when dependencies change).
- When the component is unmounted from the DOM.
Cleanup prevents issues like updating state after the component has been removed or leaving a timer running indefinitely.

3. Re-run

The effect re-runs whenever the dependencies array changes.
If the dependencies array is [], the effect only runs once when mounted.

How it Works

Basic Example: Setting up and Cleaning up a Timer

import { useEffect } from 'react'
 
function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Tick!')
    }, 1000)
 
    return () => {
      clearInterval(timer) // Cleanup
      console.log('Timer stopped')
    }
  }, []) // Runs only when mounted
 
  return <p>Counting time...</p>
}

Explanation:

Setup: When the component mounts, setInterval creates a timer that logs "Tick!" every second.
Cleanup: When the component unmounts (e.g., navigating away), clearInterval stops the timer to prevent resource waste.
Re-run: Not applicable since dependencies are [].

Example with Dependencies: Tracking a User

import { useState, useEffect } from 'react'
 
function UserTracker({ userId }) {
  const [data, setData] = useState(null)
 
  useEffect(() => {
    console.log('Tracking user:', userId)
    const ws = new WebSocket(`wss://example.com/user/${userId}`)
 
    ws.onmessage = (event) => setData(event.data)
 
    return () => {
      ws.close() // Cleanup
      console.log('Disconnected user:', userId)
    }
  }, [userId]) // Runs when userId changes
 
  return <p>Data: {data || 'Loading...'}</p>
}

Explanation:

Setup: When userId is "1", open a WebSocket to track the user.
Cleanup: Before userId changes (or when the component unmounts), close the old connection.
Re-run: When userId changes (e.g., from "1" to "2"), cleanup runs → setup re-runs with the new userId.

Why is this Important?

Resource Management

Cleanup prevents timers, WebSockets, or API requests from running indefinitely, avoiding memory leaks.

Keeping State/Props in Sync

Effects re-run when dependencies change, ensuring side effects always match the latest data.

Preventing Errors

Forgetting cleanup can lead to issues like updating the state of an unmounted component.

Real-World Examples

1. Fetching News Articles from an API

function NewsList({ category }) {
  const [articles, setArticles] = useState([])
 
  useEffect(() => {
    let ignore = false // Flag to ignore response if unmounted
 
    fetch(`https://api.example.com/news?category=${category}`)
      .then((res) => res.json())
      .then((data) => {
        if (!ignore) setArticles(data) // Only update if still mounted
      })
 
    return () => {
      ignore = true // Cleanup: ignore response if unmounted
    }
  }, [category])
 
  return articles.map((a) => <p>{a.title}</p>)
}

Explanation:

Setup: Fetches articles when category is "sports".
Cleanup: If category changes before the API responds, it ignores the old response.
Re-run: If category changes to "technology", cleanup runs → fetches again.

2. Auto-Scrolling to the Bottom when New Articles Arrive

import { useEffect, useRef } from 'react'
 
function NewsFeed({ articles }) {
  const listRef = useRef(null)
 
  useEffect(() => {
    listRef.current.scrollTop = listRef.current.scrollHeight // Scroll to bottom
  }, [articles]) // Runs when articles update
 
  return (
    <div ref={listRef} style={{ height: '200px', overflow: 'auto' }}>
      {articles.map((a) => (
        <p key={a.id}>{a.title}</p>
      ))}
    </div>
  )
}

Explanation:

Setup: Scrolls to the bottom when articles updates.
Cleanup: Not needed, as there are no resources to clean up.
Re-run: Runs every time a new article is added.

Common Mistakes

❌ Forgetting Cleanup

function Chat() {
  useEffect(() => {
    const ws = new WebSocket('wss://chat.example.com')
    ws.onmessage = (msg) => console.log(msg)
    // No cleanup → WebSocket stays open forever
  }, [])
}

Fix: Add return () => ws.close();.

❌ Missing Dependencies

function News({ category }) {
  const [data, setData] = useState(null)
  useEffect(() => {
    fetch(`https://api.example.com/${category}`).then((res) => setData(res.json()))
  }, []) // Missing category in dependencies
}

Fix: Add [category] so the effect re-runs when category changes.

Optimization Tips

1. Split Effects

If an effect does multiple things, separate them into individual useEffect hooks for better organization.

useEffect(() => {
  /* API Call */
}, [category])
useEffect(() => {
  /* Scroll Handling */
}, [articles])

2. Avoid Unnecessary Re-runs

Use conditions inside the effect if it should only run in specific cases.

3. Use Refs Instead of Effects

For direct DOM manipulation, useRef is often sufficient (see React refs guide).

Summary

The lifecycle of useEffect consists of: setup when mounted or dependencies change, cleanup before re-running or unmounting, and re-running when dependencies update. It helps synchronize side effects with state/props and manage resources efficiently. In a news website, you use effects to fetch articles, scroll pages, or track real-time data, with cleanup to prevent bugs. Understanding this lifecycle helps you write accurate effects, avoid waste, and minimize bugs.