Understanding React Component Lifecycle Methods

Mounting Phase

1. constructor(props)

• Purpose: This method is the first one called when a component is created. It initializes the component's state and binds event handlers.
• Usage: Use it to set up the initial state and bind event handlers. Avoid performing side effects or asynchronous tasks here.
• Example:
  Example in reactjs

  codeclass MyComponent extends React.Component { 
      constructor(props) { 
          super(props); 
          this.state = { count: 0 }; 
          this.handleClick = this.handleClick.bind(this); 
      } 
      
      handleClick() { 
          this.setState(prevState => ({ count: prevState.count + 1 })); 
      } 
  } 

2. render()

• Purpose: This method returns the JSX representation of the component's UI.
• Usage: Required for every React component. It should be a pure function with no side effects.
• Example:
  Example in reactjs

  codeclass MyComponent extends React.Component { 
      render() { 
          return <div>Hello, {this.props.name}!</div>; 
      } 
  } 

3. componentDidMount()

• Purpose: Invoked immediately after a component is mounted to the DOM.
• Usage: Ideal for performing tasks that require DOM manipulation or fetching data from an external source.
• Example:
  Example in reactjs

  codeclass MyComponent extends React.Component { 
      componentDidMount() { 
          fetch('https://api.example.com/data') 
              .then(response => response.json()) 
              .then(data => console.log(data)); 
      } 
  } 

Updating Phase

4. componentDidUpdate(prevProps, prevState)

• Purpose: Called immediately after an update occurs, but not for the initial render.
• Usage: Use it to perform side effects after a component re-renders, such as updating the DOM or fetching new data based on state/props changes.
• Example:
  Example in reactjs

  codeclass MyComponent extends React.Component { 
      componentDidUpdate(prevProps, prevState) { 
          if (this.props.userID !== prevProps.userID) { 
              this.fetchUserData(this.props.userID); 
          } 
      } 
  } 

Unmounting Phase

5. componentWillUnmount()

• Purpose: Invoked immediately before a component is unmounted and destroyed.
• Usage: Cleanup tasks like removing event listeners, cancelling subscriptions, or clearing intervals to prevent memory leaks.
• Example:
  Example in reactjs

  codeclass MyComponent extends React.Component { 
      componentWillUnmount() { 
          clearInterval(this.timerID); 
      } 
  } 

Conclusion

Understanding the React component lifecycle methods allows you to control the behavior and manage resources effectively within your components. By utilizing these methods at the appropriate phases, you can ensure proper initialization, perform side effects, and clean up resources when the component is unmounted. Mastery of the component lifecycle methods empowers you to create more dynamic and responsive React applications.