React Component Lifecycle Explained

import React, { Component } from 'react';

class UserProfile extends Component {
  // 1. Constructor - Initialize state
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      loading: true,
      error: null
    };
    console.log('1. Constructor called');
  }

  // 2. getDerivedStateFromProps - Rarely needed
  static getDerivedStateFromProps(props, state) {
    console.log('2. getDerivedStateFromProps called');
    // Return null if no state update needed
    return null;
  }

  // 3. Render - Return JSX
  render() {
    console.log('3. Render called');
    const { user, loading, error } = this.state;

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;
    
    return (
      <div className="user-profile">
        <h1>{user.name}</h1>
        <p>{user.email}</p>
      </div>
    );
  }

  // 4. componentDidMount - Side effects here!
  componentDidMount() {
    console.log('4. componentDidMount called');
    
    // Perfect place for API calls
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(user => this.setState({ user, loading: false }))
      .catch(error => this.setState({ error: error.message, loading: false }));
  }
}

export default UserProfile;

import React, { Component } from 'react';

class SearchResults extends Component {
  state = {
    results: [],
    loading: false
  };

  // Optimization: Skip re-render if props didn't change
  shouldComponentUpdate(nextProps, nextState) {
    // Only update if query changed or results changed
    if (nextProps.query !== this.props.query) {
      return true;
    }
    if (nextState.results !== this.state.results) {
      return true;
    }
    return false; // Skip re-render
  }

  // Capture scroll position before update
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // If we're adding new results, capture scroll position
    if (prevState.results.length < this.state.results.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  // Handle updates after render
  componentDidUpdate(prevProps, prevState, snapshot) {
    // If query changed, fetch new results
    if (prevProps.query !== this.props.query) {
      this.fetchResults(this.props.query);
    }

    // Restore scroll position after adding results
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  fetchResults = async (query) => {
    this.setState({ loading: true });
    const response = await fetch(`/api/search?q=${query}`);
    const results = await response.json();
    this.setState({ results, loading: false });
  };

  listRef = React.createRef();

  render() {
    const { results, loading } = this.state;
    
    return (
      <div className="search-results" ref={this.listRef}>
        {loading && <div className="loading">Searching...</div>}
        {results.map(result => (
          <div key={result.id} className="result">
            {result.title}
          </div>
        ))}
      </div>
    );
  }
}

import React, { Component } from 'react';

class RealTimeStock extends Component {
  state = {
    price: null,
    connected: false
  };

  componentDidMount() {
    // Set up WebSocket connection
    this.socket = new WebSocket('wss://stocks.api/live');
    
    this.socket.onopen = () => {
      this.setState({ connected: true });
      this.socket.send(JSON.stringify({ subscribe: this.props.symbol }));
    };

    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.setState({ price: data.price });
    };

    // Set up interval for UI updates
    this.intervalId = setInterval(() => {
      this.setState({ lastUpdate: new Date() });
    }, 1000);

    // Add window resize listener
    window.addEventListener('resize', this.handleResize);
  }

  // CRITICAL: Clean up everything!
  componentWillUnmount() {
    // 1. Close WebSocket connection
    if (this.socket) {
      this.socket.close();
    }

    // 2. Clear interval
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }

    // 3. Remove event listeners
    window.removeEventListener('resize', this.handleResize);

    // 4. Cancel any pending requests
    if (this.abortController) {
      this.abortController.abort();
    }

    console.log('Cleanup complete!');
  }

  handleResize = () => {
    // Handle window resize
  };

  render() {
    const { price, connected } = this.state;
    
    return (
      <div className="stock-ticker">
        <span className={connected ? 'connected' : 'disconnected'}>
          {connected ? '●' : '○'}
        </span>
        <span>{this.props.symbol}: ${price || '---'}</span>
      </div>
    );
  }
}

import { useState, useEffect } from 'react';

function useDataFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Create abort controller for cleanup
    const controller = new AbortController();
    let isMounted = true;

    async function fetchData() {
      try {
        setLoading(true);
        setError(null);

        const response = await fetch(url, {
          signal: controller.signal
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();

        // Only update state if still mounted
        if (isMounted) {
          setData(result);
          setLoading(false);
        }
      } catch (err) {
        if (err.name !== 'AbortError' && isMounted) {
          setError(err.message);
          setLoading(false);
        }
      }
    }

    fetchData();

    // Cleanup function
    return () => {
      isMounted = false;
      controller.abort();
    };
  }, [url]); // Re-fetch when URL changes

  return { data, loading, error };
}

// Usage
function UserList() {
  const { data: users, loading, error } = useDataFetch('/api/users');

  if (loading) return <Spinner />;
  if (error) return <Error message={error} />;

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

import { useState, useEffect, useCallback } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  // Memoize handler to prevent unnecessary re-subscriptions
  const handleResize = useCallback(() => {
    setSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }, []);

  useEffect(() => {
    // Add listener on mount
    window.addEventListener('resize', handleResize);

    // Remove listener on unmount
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [handleResize]);

  return size;
}

// Usage
function ResponsiveComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      Window: {width} x {height}
      {width < 768 ? <MobileView /> : <DesktopView />}
    </div>
  );
}

import { useState, useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef(callback);

  // Remember the latest callback
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval
  useEffect(() => {
    if (delay === null) return; // Paused

    const tick = () => savedCallback.current();
    const id = setInterval(tick, delay);

    return () => clearInterval(id);
  }, [delay]);
}

// Usage: Auto-refreshing component
function LiveClock() {
  const [time, setTime] = useState(new Date());

  useInterval(() => {
    setTime(new Date());
  }, 1000);

  return <div>{time.toLocaleTimeString()}</div>;
}

// Usage: Pausable timer
function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useInterval(
    () => setSeconds(s => s + 1),
    isRunning ? 1000 : null // null = paused
  );

  return (
    <div>
      <p>{seconds} seconds</p>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? 'Pause' : 'Start'}
      </button>
    </div>
  );
}