React Lifecycle Methods Explained — Mounting, Updating and Cleanup

import React, { Component } from 'react';

// A simple component that logs each lifecycle phase clearly
// so you can see the ORDER in which they fire in the console
class UserProfileCard extends Component {
  constructor(props) {
    super(props);
    // constructor runs first — before anything is painted to the DOM
    this.state = {
      profileData: null,
      isLoading: true,
    };
    console.log('[1] constructor — component instance created');
  }

  // Fires ONCE after the component appears in the DOM
  componentDidMount() {
    console.log('[3] componentDidMount — component is now visible in the DOM');

    // Safe to fetch data here because the DOM node exists
    this.fetchUserProfile(this.props.userId);
  }

  // Fires after EVERY re-render caused by props or state change
  componentDidUpdate(previousProps, previousState) {
    console.log('[5] componentDidUpdate — something changed and React re-rendered');

    // IMPORTANT: always compare previous vs current before acting
    // Without this check you get an infinite loop (fetch → setState → re-render → fetch...)
    if (previousProps.userId !== this.props.userId) {
      console.log('userId prop changed — fetching new profile');
      this.fetchUserProfile(this.props.userId);
    }
  }

  // Fires just before the component is removed from the DOM
  componentWillUnmount() {
    console.log('[6] componentWillUnmount — time to clean up');
    // If we had a timer or subscription set up in componentDidMount,
    // we'd cancel it here to avoid memory leaks
    clearTimeout(this.refreshTimer);
  }

  fetchUserProfile(userId) {
    this.setState({ isLoading: true });

    // Simulating an API call with setTimeout
    this.refreshTimer = setTimeout(() => {
      this.setState({
        profileData: { id: userId, name: 'Ada Lovelace', role: 'Engineer' },
        isLoading: false,
      });
      console.log('[4] setState called — triggers re-render and componentDidUpdate');
    }, 500);
  }

  render() {
    // render() fires BEFORE componentDidMount on first load
    // and BEFORE componentDidUpdate on subsequent renders
    console.log('[2/re-render] render — React is building the virtual DOM');

    const { isLoading, profileData } = this.state;

    if (isLoading) return <p>Loading profile...</p>;

    return (
      <div className="profile-card">
        <h2>{profileData.name}</h2>
        <p>Role: {profileData.role}</p>
      </div>
    );
  }
}

export default UserProfileCard;

import React, { Component } from 'react';

// Real-world pattern: a dashboard that fetches data on mount
// AND sets up a polling interval to refresh every 60 seconds
class WeatherDashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      weatherData: null,
      errorMessage: null,
      lastUpdated: null,
    };
    // We'll store the interval ID so we can clear it on unmount
    this.pollingInterval = null;
  }

  async componentDidMount() {
    // First fetch happens immediately when the component mounts
    await this.loadWeatherData();

    // Then we set up polling — fetch fresh data every 60 seconds
    // Store the interval ID so componentWillUnmount can clean it up
    this.pollingInterval = setInterval(async () => {
      console.log('Polling: refreshing weather data...');
      await this.loadWeatherData();
    }, 60000); // 60,000ms = 60 seconds
  }

  async loadWeatherData() {
    const { cityName } = this.props;

    try {
      // In a real app this would be: fetch(`/api/weather?city=${cityName}`)
      const response = await fetch(
        `https://api.open-meteo.com/v1/forecast?latitude=51.5&longitude=-0.1&current_weather=true`
      );

      if (!response.ok) {
        throw new Error(`API returned status ${response.status}`);
      }

      const data = await response.json();

      // setState here is safe — component is definitely mounted
      this.setState({
        weatherData: data.current_weather,
        errorMessage: null,
        lastUpdated: new Date().toLocaleTimeString(),
      });
    } catch (fetchError) {
      // Always handle errors — never let a rejected promise go silent
      this.setState({
        errorMessage: `Could not load weather: ${fetchError.message}`,
      });
    }
  }

  componentWillUnmount() {
    // CRITICAL: clear the interval when the component unmounts
    // Without this, the interval keeps firing even after the component
    // is gone, causing setState calls on an unmounted component
    if (this.pollingInterval) {
      clearInterval(this.pollingInterval);
      console.log('WeatherDashboard unmounted — polling interval cleared');
    }
  }

  render() {
    const { weatherData, errorMessage, lastUpdated } = this.state;

    if (errorMessage) {
      return <div className="error-banner">{errorMessage}</div>;
    }

    if (!weatherData) {
      return <div className="skeleton-loader">Loading weather...</div>;
    }

    return (
      <div className="weather-card">
        <h3>London Weather</h3>
        <p>Temperature: {weatherData.temperature}°C</p>
        <p>Wind Speed: {weatherData.windspeed} km/h</p>
        <small>Last updated: {lastUpdated}</small>
      </div>
    );
  }
}

export default WeatherDashboard;

import React, { Component } from 'react';

// Real-world pattern: a report that re-fetches when filters change
// This is the most common use case for componentDidUpdate
class SalesReportTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reportRows: [],
      isFetching: false,
      totalRevenue: 0,
    };
  }

  componentDidMount() {
    // Fetch the initial report using the starting prop values
    this.fetchSalesReport(this.props.startDate, this.props.endDate, this.props.regionFilter);
  }

  componentDidUpdate(previousProps) {
    // Check if ANY of the filter props changed
    // We check ALL relevant props in one condition to avoid multiple fetches
    const dateRangeChanged =
      previousProps.startDate !== this.props.startDate ||
      previousProps.endDate !== this.props.endDate;

    const regionChanged = previousProps.regionFilter !== this.props.regionFilter;

    // Only re-fetch if something that affects the report actually changed
    // This guard is what prevents the infinite loop
    if (dateRangeChanged || regionChanged) {
      console.log('Filters changed — fetching updated sales report');
      this.fetchSalesReport(
        this.props.startDate,
        this.props.endDate,
        this.props.regionFilter
      );
    }

    // You can also react to STATE changes, not just prop changes
    // For example: scroll to bottom when new rows are added
    if (previousProps.reportRows !== this.state.reportRows && this.tableRef) {
      this.tableRef.scrollTop = this.tableRef.scrollHeight;
    }
  }

  async fetchSalesReport(startDate, endDate, region) {
    // Set loading state — triggers a re-render but componentDidUpdate
    // won't re-fetch because the props haven't changed
    this.setState({ isFetching: true });

    try {
      // Simulated API response
      const mockRows = [
        { id: 1, product: 'Enterprise License', revenue: 12000, region },
        { id: 2, product: 'Pro Subscription', revenue: 3400, region },
        { id: 3, product: 'Consulting Hours', revenue: 5600, region },
      ];

      const totalRevenue = mockRows.reduce((sum, row) => sum + row.revenue, 0);

      this.setState({
        reportRows: mockRows,
        totalRevenue,
        isFetching: false,
      });
    } catch (error) {
      this.setState({ isFetching: false });
      console.error('Failed to fetch report:', error);
    }
  }

  render() {
    const { reportRows, isFetching, totalRevenue } = this.state;
    const { startDate, endDate, regionFilter } = this.props;

    return (
      <div className="report-container">
        <h3>
          Sales Report: {startDate} to {endDate} ({regionFilter})
        </h3>

        {isFetching ? (
          <p>Refreshing data...</p>
        ) : (
          <table>
            <thead>
              <tr><th>Product</th><th>Revenue</th><th>Region</th></tr>
            </thead>
            <tbody>
              {reportRows.map((row) => (
                <tr key={row.id}>
                  <td>{row.product}</td>
                  <td>${row.revenue.toLocaleString()}</td>
                  <td>{row.region}</td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr><td colSpan="2"><strong>Total: ${totalRevenue.toLocaleString()}</strong></td></tr>
            </tfoot>
          </table>
        )}
      </div>
    );
  }
}

export default SalesReportTable;

import React, { Component, useState, useEffect } from 'react';

// ─────────────────────────────────────────────────────────
// CLASS COMPONENT VERSION — explicit lifecycle methods
// ─────────────────────────────────────────────────────────
class NotificationPanelClass extends Component {
  constructor(props) {
    super(props);
    this.state = { notifications: [], connectionStatus: 'disconnected' };
    this.socketConnection = null;
  }

  componentDidMount() {
    // Set up a WebSocket-like subscription when the component mounts
    this.connectToNotificationStream(this.props.userId);
  }

  componentDidUpdate(previousProps) {
    // If the user changes (e.g. admin views another user's notifications),
    // disconnect the old stream and connect to the new one
    if (previousProps.userId !== this.props.userId) {
      this.disconnectFromStream();
      this.connectToNotificationStream(this.props.userId);
    }
  }

  componentWillUnmount() {
    // Always close the connection when the panel is hidden/removed
    this.disconnectFromStream();
  }

  connectToNotificationStream(userId) {
    console.log(`Connecting to stream for user: ${userId}`);
    this.setState({ connectionStatus: 'connected' });

    // Simulating a real-time notification stream
    this.socketConnection = setInterval(() => {
      this.setState((previousState) => ({
        notifications: [
          ...previousState.notifications,
          { id: Date.now(), message: `New alert for user ${userId}` },
        ],
      }));
    }, 3000);
  }

  disconnectFromStream() {
    if (this.socketConnection) {
      clearInterval(this.socketConnection);
      this.socketConnection = null;
      this.setState({ connectionStatus: 'disconnected' });
      console.log('Disconnected from notification stream');
    }
  }

  render() {
    const { notifications, connectionStatus } = this.state;
    return (
      <div>
        <span>Status: {connectionStatus}</span>
        <ul>{notifications.map((n) => <li key={n.id}>{n.message}</li>)}</ul>
      </div>
    );
  }
}

// ─────────────────────────────────────────────────────────
// FUNCTIONAL COMPONENT VERSION — same logic, hooks style
// Notice how useEffect with a cleanup return collapses
// componentDidMount + componentDidUpdate + componentWillUnmount
// ─────────────────────────────────────────────────────────
function NotificationPanelHooks({ userId }) {
  const [notifications, setNotifications] = useState([]);
  const [connectionStatus, setConnectionStatus] = useState('disconnected');

  useEffect(() => {
    // This block = componentDidMount + componentDidUpdate (when userId changes)
    console.log(`Connecting to stream for user: ${userId}`);
    setConnectionStatus('connected');

    const streamInterval = setInterval(() => {
      setNotifications((previousNotifications) => [
        ...previousNotifications,
        { id: Date.now(), message: `New alert for user ${userId}` },
      ]);
    }, 3000);

    // The return function = componentWillUnmount
    // React also calls this cleanup BEFORE re-running the effect
    // when userId changes — so we get automatic reconnection logic
    return () => {
      clearInterval(streamInterval);
      setConnectionStatus('disconnected');
      console.log('Disconnected from notification stream');
    };

  }, [userId]); // Only re-run this effect when userId changes

  return (
    <div>
      <span>Status: {connectionStatus}</span>
      <ul>{notifications.map((n) => <li key={n.id}>{n.message}</li>)}</ul>
    </div>
  );
}

export { NotificationPanelClass, NotificationPanelHooks };