useEffect Hook Basics

🧑‍🏫

NoteArc Instruction

Episode 14 of 32· 1 min read

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