How to call a method when component is rendered for the first time in React?

Question

How to call a method when a component is rendered for the first time in React?

Answer

In React functional components, you use useEffect with an empty dependency array ([]) to mimic “on mount” behavior.

import { useEffect } from 'react';

function Dashboard() {
  useEffect(() => {
    console.log('Component mounted');
    fetchData(); // your method here
  }, []);

  const fetchData = () => {
    console.log('Fetching data...');
  };

  return <h2>Welcome to Dashboard</h2>;
}

✅ How it works:

• useEffect runs after the first render.
• Empty dependency [] ensures it runs only once.

Real-World Example

• Fetching API data on component load.
• Setting up event listeners.
• Running initial analytics or logs.

Quick Practice

Build a component that fetches user data from an API once when it mounts.

Summary

To run logic once on mount, use useEffect(() => {...}, []).