Lokesh

Posted on Nov 4

useEffect in React

#react #javascript #beginners #tutorial

1. What Is useEffect?

useEffect is a React Hook used to handle side effects in functional components.

A side effect is an operation that happens outside the normal process of displaying the UI.

Some common examples are:

Fetching data from an API.
Setting a timer.
Updating the document title.
Adding event listeners.
Subscribing to external services.

2. How to Import useEffect?

First, we need to import useEffect from React.

import { useEffect } from "react";

3. Basic Syntax

useEffect(() => {
    // Side effect code
}, []);

Here:

The first argument is a callback function containing the side effect.
The second argument is the dependency array.

4. useEffect Without a Dependency Array

If we don't provide a dependency array, the effect runs after every render.

import { useEffect, useState } from "react";

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

    useEffect(() => {
        console.log("Component rendered");
    });

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

export default Counter;

Every time the component renders, the effect runs.

5. useEffect With an Empty Dependency Array

When we provide an empty dependency array [], the effect runs after the component is first mounted.

import { useEffect } from "react";

function App() {

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

    return <h1>Hello React!</h1>;
}

export default App;

This is commonly used when we want to perform an operation when a component first appears.

6. useEffect With Dependencies

We can also provide variables inside the dependency array.

The effect runs after the initial render and again whenever a dependency changes.

import { useEffect, useState } from "react";

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

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

    return (
        <div>
            <h1>{count}</h1>

            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    );
}

export default Counter;

Here, the effect runs whenever the count value changes.

7. Cleanup Function in useEffect

Sometimes, we need to clean up an operation when a component is removed or before an effect runs again.

For example, when using a timer, we should clear it when it is no longer needed.

import { useEffect } from "react";

function Timer() {

    useEffect(() => {
        const timer = setInterval(() => {
            console.log("Timer running...");
        }, 1000);

        return () => {
            clearInterval(timer);
            console.log("Timer stopped");
        };
    }, []);

    return <h1>Timer Example</h1>;
}

export default Timer;