useEffect Hook

useEffect runs side effects in functional components — data fetching, subscriptions, or DOM manipulation.

Syntax

REACT

1
2
3
4
5
6
7
8
9
10
11

import { useEffect, useState } from 'react';

function DataFetcher() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/api/data')
            .then(res => res.json())
            .then(setData);
    }, []);
}

useEffect Hook

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { useState, useEffect } from "react";

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(s => s + 1);
        }, 1000);

        return () => clearInterval(interval);
    }, []);

    return <p>Timer: {seconds}s</p>;
}

Try It Yourself

Practice

1

Exercise

Practice this concept.

Answer

Write the code as shown above.

Quick Quiz

1

What did you learn?

Concept A

Concept B

Concept C

Concept D

This covers the basics.

Retry Quiz

Interview Questions

Explain this concept.

It is a fundamental React feature.

Previous

useState Hook

Next Lesson

useContext Hook