ReactJS – useEffect Hook | React Tutorial

📌 What is useEffect Hook?

The word effect refers to a functional programming term called a "side effect". Some examples of side effects are: fetching data from an API, directly updating the DOM, and timers. The useEffect Hook allows you to perform side effects in your functional component.

📋 Common Side Effects

Making API requests to a backend server
Interacting with browser APIs (like document or window)
Using unpredictable timing functions like setTimeout or setInterval

📌 Why use useEffect?

Lets you run extra code after React updates the DOM
Useful for data fetching, subscriptions, or manually changing the DOM
Runs after the first render and after every update by default
Cannot be written inside render(), only inside function components

⚙️ Syntax

The useEffect hook accepts two arguments:

useEffect(callback, dependencies)

callback: Function to run after render
dependencies: Optional array controlling when effect runs

You can use multiple useEffect hooks inside a single component.

🟢 Example 1: No Dependency Passed

When no dependency array is passed, useEffect runs after every render.

React Playground

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

const FunctionEffect = () => {
  let [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Hello I am useEffect = ' + count);
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Update State</button>
    </div>
  );
};

export default FunctionEffect;

Open Sandbox

🟢 Example 2: Empty Dependency []

When an empty dependency array is passed, useEffect runs only once after the first render.

React Playground

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

const FunctionEffect = () => {
  let [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Hello I am useEffect = ' + count);
  }, []);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Update State</button>
    </div>
  );
};

export default FunctionEffect;

Open Sandbox

🟢 Example 3: With Dependencies

When specific values (state or props) are added in the dependency array, useEffect runs only when those values change.

React Playground

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

const FunctionEffect = () => {
  let [count, setCount] = useState(0);
  let [item, setItem] = useState(1);

  useEffect(() => {
    console.log('Hello I am useEffect = ' + count);
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <h1>{item}</h1>
      <button onClick={() => setCount(count + 1)}>Update State</button>
      <button onClick={() => setItem(item * 2)}>Update Item</button>
    </div>
  );
};

export default FunctionEffect;

Open Sandbox

🟢 Example 4: Multiple useEffect Hooks

You can use multiple useEffect hooks to separate concerns.

React Playground

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

const FunctionEffect = () => {
  let [count, setCount] = useState(0);
  let [item, setItem] = useState(1);

  useEffect(() => {
    console.log('Hello I am Counter = ' + count);
  }, [count]);

  useEffect(() => {
    console.log('Hello I am Item = ' + item);
  }, [item]);

  return (
    <div>
      <h1>{count}</h1>
      <h1>{item}</h1>
      <button onClick={() => setCount(count + 1)}>Update State</button>
      <button onClick={() => setItem(item * 2)}>Update Item</button>
    </div>
  );
};

export default FunctionEffect;

Open Sandbox

react

Nearby lessons