ReactJS useEffect Hook (original) (raw)

Last Updated : 12 Apr, 2025

The useEffect hook is one of the most commonly used hooks in ReactJS used to handle side effects in functional components. Before hooks, these kinds of tasks were only possible in class components through lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

What is useEffect hook in React?

The useEffect in ReactJS is used to handle the side effects such as fetching data and updating DOM. This hook runs on every render but there is also a way of using a dependency array using which we can control the effect of rendering. It can be used to perform actions such as:

• Fetching data from an API.
• Setting up event listeners or subscriptions.
• Manipulating the DOM directly (although React generally handles DOM manipulation for you).
• Cleaning up resources when a component unmounts.

**Syntax

useEffect(() => { // Code to run on each render return () => { // Cleanup function (optional) }; }, [dependencies]);

• **Effect function: This is where your side effect code runs.
• **Cleanup function: This optional return function cleans up side effects like subscriptions or timers when the component unmounts.
• **Dependencies array: React re-runs the effect if any of the values in this array change

**How does it work?

• **Initial Render Happens: React renders the component and updates the DOM.
• **useEffect Executes After Render: It runs after the paint, not during render.
• **Dependencies Are Checked: If there is no dependency array, the effect runs after every render; if the array is empty ([]), it runs once on mount; if dependencies are provided, it runs only when those values change.
• **Cleanup Function Runs: Before the effect re-runs or the component unmounts, the cleanup function (returned from useEffect) is executed.
• **Effect Re-runs: If dependencies changed, the effect runs again — after cleanup.

**Now let's see how to implement useEffect Hook in ReactJS

JavaScript ``

//HookCounterOne.js

// useEffect is defined here

import { useState, useEffect } from "react";

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

useEffect(() => {
    document.title = `You clicked ${count} times`;
}, [count]);

return (
    <div>
        <button onClick={() => setCount((prevCount) => prevCount + 1)}>
            Click {count} times{" "}
        </button>
    </div>
);

} export default HookCounterOne;

`` JavaScript `

//App.js

// Importing and using HookCounterOne

import React from "react"; import "./App.css"; import HookCounterOne from "./components/HookCounterOne";

function App() { return (

`

**Output

**In this example

• useEffect triggers a function on every component render, using React to execute specified tasks efficiently.
• Positioned within the component, it grants easy access to state and props without additional coding.
• For replicating lifecycle methods in functional components, copy and customize the provided code snippet according to your needs.

Controlling side effects in useEffect

1. To run useEffect on every render do not pass any dependency

useEffect(()->{
// Example Code
})

2. To run useEffect only once on the first render pass any empty array in the dependecy

useEffect(()->{
// Example Code
}, [] )

3. To run useEffect on change of a particular value. Pass the state and props in the dependency array

useEffect(()->{
// Example Code
}, [props, state] )

**Ways to mimic lifecycle methods using useEffect hook

The useEffect() hook is not only used for handling side effects, but it also allows functional components to replicate the behavior of class-based lifecycle methods like:

• **Mimicking componentDidMount: To run code once when the component mounts, pass an empty dependency array ([]) to useEffect. This ensures the effect runs only once, similar to componentDidMount.

useEffect(() => { console.log("Component mounted (Functional)"); }, []);

• Mimicking componentDidUpdate : To run code every time a specific state or prop changes, include those variables in the dependency array. This simulates **componentDidUpdate****.**

useEffect(() => { console.log("Component updated (Functional)"); }, [value1, value2]);

• Mimicking componentWillUnmount: To run cleanup logic when the component unmounts, return a cleanup function from useEffect. This simulates **componentWillUnmount.

useEffect(() => { return () => { console.log("Component unmounted (Functional)"); }; }, []);

**Cleaning Up Side Effects

useEffect allows you to clean up after your effects by returning a cleanup function. This is particularly useful for:

• **Removing event listeners.
• **Canceling network requests.
• **Clearing timers or **intervals.

For example, if you're setting up a timer, you can clean it up when the component unmounts or when dependencies change.

Best Practices for useEffect

Always provide a dependency array: This helps React know when the effect should run. If you don’t specify dependencies, it will run on every render.

• **Use multiple useEffect hooks for different concerns: Split logic into separate effects to keep your code organized and readable.
• **Cleanup effects: If your effect involves timers, subscriptions, or external resources, return a cleanup function to prevent memory leaks.
• **Avoid heavy logic inside useEffect: Keep the logic inside useEffect simple. If needed, move complex logic into separate functions.

Conclusion

The useEffect hook is a powerful tool in React for handling side effects in function components. By using useEffect, you can easily manage tasks like data fetching, subscribing to events, and cleaning up resources when a component unmounts. Its flexibility allows you to run effects after the component renders, only when certain dependencies change, or once when the component mounts.