What are Class Component Lifecycle Methods?
Learn React class component lifecycle methods across mount, update, and unmount phases, with examples, cleanup tips, and how they map to useEffect.
Expected Interview Answer
Class component lifecycle methods are special functions React calls automatically at defined points in a component's life — mounting, updating, and unmounting — letting you run setup, respond to changes, and clean up.
The three phases are mounting (constructor, render, componentDidMount), updating (render, componentDidUpdate), and unmounting (componentWillUnmount). componentDidMount is where you fetch data or start subscriptions, componentDidUpdate reacts to prop or state changes, and componentWillUnmount cancels timers and subscriptions to avoid leaks. In modern React the useEffect Hook covers these responsibilities in function components.
- Run setup exactly once after the first render
- React to prop and state changes precisely
- Clean up subscriptions and timers to prevent memory leaks
- Control when a component re-renders
- Predictable, well-ordered execution across phases
AI Mentor Explanation
A cricketer's day follows fixed stages: walk out and take guard when arriving at the crease (mount), adjust the stance and shot as each new ball comes (update), and remove the pads and leave when dismissed (unmount). Lifecycle methods are those stages — componentDidMount is taking guard, componentDidUpdate is reading each delivery, componentWillUnmount is walking back to the pavilion cleanly.
Step-by-Step Explanation
Step 1
Constructor
Runs first when the component is created — initialise state and bind methods here, never call setState.
Step 2
render
Returns the JSX to display; it must be pure and free of side effects, and may run multiple times.
Step 3
componentDidMount
Fires once after the first render — the right place to fetch data, start subscriptions, or set timers.
Step 4
componentDidUpdate
Runs after every re-render caused by prop or state changes; compare prevProps/prevState before acting to avoid loops.
Step 5
componentWillUnmount
Fires just before the component is removed — clear timers, cancel requests, and unsubscribe to prevent leaks.
What Interviewer Expects
- Knowing the three phases: mount, update, unmount
- componentDidMount for data fetching and subscriptions
- Cleanup in componentWillUnmount to avoid memory leaks
- Guarding componentDidUpdate against infinite loops
- Mapping lifecycle methods to the useEffect Hook
Common Mistakes
- Calling setState directly inside render
- Fetching data in the constructor instead of componentDidMount
- Updating state in componentDidUpdate without a condition, causing infinite loops
- Forgetting to unsubscribe or clear timers in componentWillUnmount
- Relying on deprecated methods like componentWillMount or componentWillReceiveProps
Best Answer (HR Friendly)
“Lifecycle methods are built-in functions React runs at set moments in a component's life — when it appears, when it changes, and when it goes away. They let developers load data at the right time and tidy up afterward so the app stays fast and doesn't waste memory.”
Code Example
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { time: new Date() };
}
componentDidMount() {
// Setup: start a timer once after first render
this.timerId = setInterval(() => {
this.setState({ time: new Date() });
}, 1000);
}
componentDidUpdate(prevProps) {
// React to prop changes safely
if (prevProps.timezone !== this.props.timezone) {
console.log('Timezone changed');
}
}
componentWillUnmount() {
// Cleanup: stop the timer to prevent a leak
clearInterval(this.timerId);
}
render() {
return <h1>{this.state.time.toLocaleTimeString()}</h1>;
}
}Follow-up Questions
- How do these lifecycle methods map to the useEffect Hook?
- Why was componentWillMount deprecated?
- What is the purpose of getDerivedStateFromProps?
- How does shouldComponentUpdate improve performance?
- What happens if you forget to clean up in componentWillUnmount?
MCQ Practice
1. Which lifecycle method is the recommended place to fetch data after the first render?
componentDidMount runs once after the initial render, making it the standard place to fetch data or start subscriptions.
2. Which method should be used to clean up timers and subscriptions?
componentWillUnmount runs right before the component is destroyed, so it is where you clear timers and cancel subscriptions.
3. What common bug does calling setState in componentDidUpdate without a condition cause?
Unconditionally setting state in componentDidUpdate triggers another update, which calls componentDidUpdate again, creating an infinite loop.
Flash Cards
What are the three lifecycle phases? — Mounting, updating, and unmounting.
Where do you fetch data in a class component? — In componentDidMount, after the first render.
What does componentWillUnmount do? — Runs before removal to clean up timers, subscriptions, and requests.
How do you avoid infinite loops in componentDidUpdate? — Compare prevProps/prevState before calling setState.
What Hook replaces these methods in function components? — The useEffect Hook.