Episode 14 of 32

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