A lifecycle method is a class-based component method that runs when a component mounts, renders, updates, or unmounts. It lets a component react to lifecycle stages beyond returning JSX. section 6.0 section 6.3
Method names usually indicate their purpose and lifecycle position. Some run during multiple events, while others can influence React’s update scheduling; several older methods have been deprecated. section 6.3
Common lifecycle responsibilities map to these class methods and functional alternatives:
- render() supplies the component’s rendered output; in a functional component, the entire component function serves this role. section 6.3.3
- componentDidMount() handles work after mounting, commonly corresponding to useEffect() with no dependencies. section 6.3.3
- componentDidUpdate() can be represented by useEffect() with dependencies for values that changed. section 6.3.3
- shouldComponentUpdate() controls update decisions in classes; functional components instead use memoization when render reduction is needed. section 6.3.3
- getSnapshotBeforeUpdate() supports unusual pre-update measurements, especially recording scroll position before new data arrives. section 6.3.3
A component timer
A timer can start when a class component mounts and stop when it unmounts, preventing the component from continuing to consume resources after removal. section 6.0
Functional components cannot use class lifecycle methods. They generally express the same effects with hooks, but conversion is not mechanical: timing differences, state design, and feature behavior may require rethinking. section 6.3 section 6.3.3
