← Back to all tutorials

React TutorialEpisode 14

useEffect Hook Basics

Learn the useEffect hook for running side effects like data fetching and DOM manipulation.

The useEffect hook runs side effects after render.

Basic useEffect

import { useEffect } from "react";

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

  return <div>Home</div>;
};

When Does It Run?

After every render by default
On mount and every state/prop change

Common Use Cases

Fetching data from an API
Setting up event listeners
Updating the document title
Timers and intervals