📦 Mounting Phase

The mounting phase is when your component is created and added to the DOM for the first time.

What Happens During Mounting

1. Component function is called
2. State hooks (useState) initialize
3. Component renders (JSX is processed)
4. DOM is updated
5. Effects with [] run

Basic Mounting Example

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  // This effect runs ONCE when component mounts
  React.useEffect(() => {
    console.log("Component mounted, fetching user...");
    
    fetchUser(userId).then(userData => {
      setUser(userData);
      setLoading(false);
    });
  }, []); // Empty dependency array = run on mount only

  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

Order of Operations

function MountingOrder() {
  console.log("1. Function called");
  
  const [count, setCount] = React.useState(0);
  console.log("2. State initialized");

  React.useEffect(() => {
    console.log("5. Effect ran (mounted)");
  }, []);

  console.log("3. Render logic executed");

  return <div>{count}</div>; // "4. Component renders"
}

// Console output:
// 1. Function called
// 2. State initialized
// 3. Render logic executed
// 4. Component renders
// 5. Effect ran (mounted)

Common Mounting Tasks

Task 1: Fetch Data

function DataFetcher() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/data")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data?.title}</div>;
}

Task 2: Set Up Event Listeners

function WindowListener() {
  const [width, setWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <div>Width: {width}px</div>;
}

Task 3: Initialize Animations

function AnimatedElement() {
  const [isVisible, setIsVisible] = React.useState(false);

  React.useEffect(() => {
    // Trigger animation after mount
    setIsVisible(true);
  }, []);

  return <div className={isVisible ? "visible" : "hidden"}>Content</div>;
}

Important Notes

• Mount effects run **AFTER the first render**

• Use `[]` dependency array for mount-only effects

• Don't place cleanup code directly in mount effects - use return function

• Mounting only happens **once per component instance**

✅ Key Takeaways

• Mounting is when component **first appears** in the DOM

• Use **useEffect with []** to run code once on mount

• Common mount tasks: **fetching data**, **setting up listeners**, **initialization**

• Effects run **after the first render**, not before

• Always **clean up** side effects with return function