Web Unit 3 Sprint 9 - Class Components & Testing

Module 2: The React Lifecycle

In this module, you'll dive deeper into the React component lifecycle, understanding how components mount, update, and unmount. You'll learn about lifecycle methods and their use cases.

Understanding the React component lifecycle is critical for creating efficient and effective React applications. The component lifecycle is divided into three main phases (mounting, updating, and unmounting), each with specific methods that you can leverage to control your component's behavior.

By mastering lifecycle methods, you'll be able to handle side effects, optimize performance, manage resources, and create more dynamic and responsive React applications.

Learning Objectives

  • Describe the three phases of the React component lifecycle
  • Properly explain what the constructor and render methods do and what their place is in the React component lifecycle
  • Understand and implement componentDidMount, componentDidUpdate, and componentWillUnmount
  • Use lifecycle methods to handle side effects and cleanup

As Dan Abramov (one of React's maintainers) visually explains, the lifecycle can be thought of as a component's birth, growth, and death process:

  • Birth/Mounting - Your component is being initialized and inserted into the DOM
  • Growth/Updating - Your component is receiving new props or state changes
  • Death/Unmounting - Your component is being removed from the DOM

Content

The React Component Lifecycle

Component Lifecycle Phases in Detail

  • Mounting Phase: Component initialization, first render, and initial DOM insertion
    • constructor() - Initialize state and bind methods
    • render() - Create elements from JSX
    • componentDidMount() - Component is in the DOM, fetch data, set up subscriptions
  • Updating Phase: Component reacts to prop/state changes
    • shouldComponentUpdate() - Decide if a re-render is necessary
    • render() - Re-render with updated values
    • componentDidUpdate() - React to changes after the DOM updates
  • Unmounting Phase: Component is removed from the DOM
    • componentWillUnmount() - Clean up subscriptions, timers, event listeners

React Component LifeCycle - Mounting Phase

Constructor and Render Methods

  • Constructor:
    • Always call super(props) first
    • Initialize state (this.state = {...})
    • Bind event handler methods to class instance
    • Do NOT cause side effects or use setState()
  • Render:
    • Required in every class component
    • Must be pure - same input always produces same output
    • Returns React elements (JSX), arrays, portals, strings, numbers, null, or booleans
    • Don't modify state or interact with DOM directly

Testing Output on Props Change

componentDidUpdate and Testing

  • componentDidUpdate(prevProps, prevState) allows you to compare current props/state with previous values
  • Perfect for reacting to prop changes and performing side effects (like data fetching)
  • Testing prop changes ensures components react correctly to new data
  • Avoid infinite loops by conditionally updating state

Practice Activities

Guided Project

Additional Resources

React Component Lifecycle Documentation Component Lifecycle Methods Error Boundaries in React React Lifecycle Methods Diagram Understanding ReactJS Component Life Cycle