React Lifecycle

Mounting Phase

The mounting phase happens when a component is first rendered to the DOM.

Functional Components

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  // Runs after first render (like componentDidMount)
  useEffect(() => {
    console.log("Component mounted");
    fetchUser(userId).then(setUser);

    // Cleanup (like componentWillUnmount)
    return () => {
      console.log("Component will unmount");
    };
  }, []); // Empty array = runs once on mount

  // Runs after every render (no dependency array)
  useEffect(() => {
    console.log("Component rendered");
  });

  if (!user) return <div>Loading...</div>;

  return <div>{user.name}</div>;
}

What Happens on Mount

1. Component function is called
2. JSX is rendered to Virtual DOM
3. Virtual DOM is committed to real DOM
4. Effects run (useEffect with [])

Common Mount Tasks

• Fetch initial data
• Set up subscriptions
• Add event listeners
• Initialize third-party libraries

function Map({ center }) {
  const mapRef = useRef(null);

  useEffect(() => {
    // Initialize map on mount
    const map = new google.maps.Map(mapRef.current, {
      center,
      zoom: 12
    });

    // Cleanup on unmount
    return () => {
      map.destroy();
    };
  }, []);

  return <div ref={mapRef} style={{ height: "400px" }} />;
}

Updating Phase

The updating phase happens when props or state change.

Functional Components

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  // Runs after every render when dependencies change
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Re-runs when count changes

  // Runs when initialCount changes
  useEffect(() => {
    setCount(initialCount);
  }, [initialCount]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

What Triggers Updates

1. State changes (useState, useReducer)
2. Prop changes
3. Parent re-renders
4. Context changes

Update Flow

1. New props/state received
2. Component re-renders
3. Virtual DOM is diffed
4. Only changed parts are updated in real DOM
5. Effects run if dependencies changed

Conditional Effects

function DataComponent({ id, type }) {
  const [data, setData] = useState(null);

  // Only runs when id changes
  useEffect(() => {
    fetchData(id).then(setData);
  }, [id]);

  // Only runs when type changes
  useEffect(() => {
    logTypeChange(type);
  }, [type]);

  return <div>{data ? JSON.stringify(data) : "Loading..."}</div>;
}

Unmounting Phase

The unmounting phase happens when a component is removed from the DOM.

Functional Components

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prev) => prev + 1);
    }, 1000);

    // Cleanup runs on unmount
    return () => {
      clearInterval(interval);
      console.log("Timer cleaned up");
    };
  }, []);

  return <p>Count: {count}</p>;
}

What Happens on Unmount

1. Component is removed from DOM
2. Cleanup functions run
3. Effects are cleaned up

Common Cleanup Tasks

• Clear timers/intervals
• Cancel API requests
• Remove event listeners
• Close WebSocket connections
• Unsubscribe from subscriptions

Cleanup Pattern

function useSubscription(topic) {
  useEffect(() => {
    const unsubscribe = subscribe(topic);

    return () => {
      unsubscribe();
    };
  }, [topic]);
}

// Cleanup before next effect
function Component({ userId }) {
  useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/users/${userId}`, { signal: controller.signal });

    // Runs when userId changes AND on unmount
    return () => controller.abort();
  }, [userId]);
}

Conditional Rendering

function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>
      {show && <Timer />}
    </div>
  );
}

// Timer mounts/unmounts as show toggles
// Cleanup runs each time Timer unmounts