Demon Tech Roadmap

React

React useEffect Hook

The useEffect Hook handles side effects like fetching data.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

React components should ideally just take data and render UI. The `useEffect` Hook handles everything else, known as "side effects." Developers use it to fetch API data, set up timers, or manipulate the DOM directly.

Example

1/* this fetches data */
2import { useEffect, useState } from "react";
3
4function DataLoader() {
5  useEffect(() => {
6    console.log("Component loaded on the screen!");
7  }, []); // Empty array runs once
8}

Key Points

The first argument is a function that runs the effect.
The second argument is a dependency array.
An empty array `[]` makes the effect run only once.
Missing dependencies can cause infinite rendering loops.

Up Next

Continue your journey with the next topic.

Go to React useContext ❯