🔄 Lifecycle Methods

Class components have lifecycle methods that are called at specific times during a component's life.

Main Lifecycle Methods

Mounting Methods

constructor()

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

componentDidMount()

class DataFetcher extends React.Component {
  componentDidMount() {
    fetch("/api/data")
      .then(r => r.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

Updating Methods

componentDidUpdate()

class SearchResults extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.query !== this.props.query) {
      this.search();
    }
  }

  search() {
    // Perform search
  }

  render() {
    return <div>Results for: {this.props.query}</div>;
  }
}

Unmounting Method

componentWillUnmount()

class TimerComponent extends React.Component {
  componentDidMount() {
    this.timer = setTimeout(() => {}, 1000);
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  render() {
    return <div>Timer running...</div>;
  }
}

Lifecycle Timing

✅ Key Takeaways

• **constructor()** runs first

• **componentDidMount()** runs once, fetch data here

• **componentDidUpdate()** runs after every update

• **componentWillUnmount()** runs before removal