Module 2 - The React Lifecycle

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

Web Unit 3 Sprint 9 - Class Components & Testing