React Lifecycle Interview Questions

One of the most common React interview questions is:

What is the React Component Lifecycle?

Interviewers often ask:

• What are the lifecycle phases?
• What happens during mounting?
• What happens during updating?
• What happens during unmounting?
• How does useEffect relate to lifecycle methods?
• How do cleanup functions work?
• What causes a component to re-render?

Let's understand React Lifecycle from first principles.

1. Why Do We Need a Lifecycle?

Consider a component:

function UserProfile() {
  return <h1>John</h1>;
}

At first glance:

Component Appears

But internally React performs several operations:

Create Component
      ↓
Render UI
      ↓
Update UI
      ↓
Remove UI

These stages form the:

Component Lifecycle

2. Understanding the React Lifecycle Phases

The React Lifecycle describes the different phases a component goes through from creation to removal.

Every component experiences:

Mounting
Updating
Unmounting

Visual Representation

Mount
  ↓
Update
  ↓
Update
  ↓
Update
  ↓
Unmount

This lifecycle applies to every React component.

The Three Main Lifecycle Phases

Mounting

Component Appears
For The First Time

Updating

Component Re-renders
Due To Changes

Unmounting

Component Removed
From The DOM

3. The Mounting Phase

The mounting phase occurs when a component is rendered for the first time.

Example:

function App() {
  return <UserProfile />;
}

When:

<UserProfile />

appears on the screen:

Mounting Occurs

What Happens During Mounting?

React performs:

Create Component
      ↓
Execute Function
      ↓
Generate JSX
      ↓
Build Virtual DOM
      ↓
Update Real DOM

Example

function UserProfile() {
  console.log("Mounted");
 
  return <h1>John</h1>;
}

Output:

Mounted

when the component first renders.

useEffect During Mounting

Modern React uses:

useEffect();

to perform side effects.

Example:

useEffect(() => {
  console.log("Mounted");
}, []);

Output:

Mounted

The empty dependency array means:

Run Once After Mount

Common Mounting Tasks

Typical mounting operations:

• API requests
• Analytics tracking
• Initial data loading
• WebSocket connections
• Event listeners

Example:

useEffect(() => {
  fetchUsers();
}, []);

4. The Updating Phase

Updating occurs whenever React re-renders a component.

Common triggers:

State Changes
Prop Changes
Context Changes
Parent Re-renders

Example: State Update

function Counter() {
  const [count, setCount] = useState(0);
 
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Every click:

State Update
      ↓
Re-render
      ↓
Update Phase

Example: Prop Update

Parent:

<UserCard name={user.name} />

When:

user.name;

changes:

New Props
      ↓
Re-render

useEffect During Updates

Example:

useEffect(() => {
  console.log("Count Changed");
}, [count]);

Runs whenever:

count;

changes.

Updating Flow

State/Props Change
        ↓
Render Phase
        ↓
Virtual DOM Diff
        ↓
DOM Updates
        ↓
Effects Run

This process is known as:

Reconciliation

5. The Unmounting Phase

Unmounting occurs when a component is removed from the UI.

Example:

{
  showModal && <Modal />;
}

When:

showModal = false;

React removes:

<Modal />

from the DOM.

What Happens During Unmounting?

React:

Removes DOM Nodes
        ↓
Runs Cleanup Functions
        ↓
Releases Resources

Cleanup Functions

One of the most important lifecycle concepts.

Example:

useEffect(() => {
  const id = setInterval(() => {
    console.log("Running");
  }, 1000);
 
  return () => {
    clearInterval(id);
  };
}, []);

Cleanup runs during:

Unmount

Why Cleanup Is Important

Without cleanup:

Timers Continue Running
 
Event Listeners Remain
 
Memory Leaks Occur

Event Listener Example

Bad:

useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);

Problem:

Listener Survives
After Component Removal

Correct

useEffect(() => {
  window.addEventListener("resize", handleResize);
 
  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

6. Class Component Lifecycle Methods vs. Functional Hooks

Before Hooks, React used lifecycle methods.

Mounting:

componentDidMount();

Updating:

componentDidUpdate();

Unmounting:

componentWillUnmount();

Example

class UserProfile extends React.Component {
  componentDidMount() {
    console.log("Mounted");
  }
 
  componentWillUnmount() {
    console.log("Unmounted");
  }
 
  render() {
    return <h1>User</h1>;
  }
}

Lifecycle Mapping to Hooks

7. Common Interview Q&A

What Causes a Component to Re-render?

Common causes:

State Changes
 
Prop Changes
 
Context Changes
 
Parent Re-renders

7. Common Interview Q&A

Does useEffect Run Before Render?

No.

Flow:

Render
   ↓
Paint
   ↓
useEffect

Effects run after rendering.

7. Common Interview Q&A

When Does Cleanup Run?

Cleanup runs:

Before Unmount

and

Before Running
The Next Effect

Example

useEffect(() => {
  console.log("Effect");
 
  return () => {
    console.log("Cleanup");
  };
}, [count]);

When:

count;

changes:

Output:

Cleanup
Effect

React cleans up the previous effect first.

8. React 18 Strict Mode Lifecycle Behavior

A common interview topic.

Development mode:

<React.StrictMode>

may execute effects twice.

Example:

useEffect(() => {
  console.log("Mounted");
}, []);

Development:

Mounted
Mounted

Production:

Mounted

This helps detect side effects.

7. Common Interview Q&A

What Are the Three Lifecycle Phases?

Mounting
 
Updating
 
Unmounting

What Happens During Mounting?

The component renders for the first time and effects execute.

What Triggers Updating?

• State changes
• Prop changes
• Context changes
• Parent re-renders

What Happens During Unmounting?

React removes the component and executes cleanup functions.

Which Hook Replaces Lifecycle Methods?

useEffect();

Why Are Cleanup Functions Important?

They prevent:

Memory Leaks
 
Orphaned Timers
 
Lingering Event Listeners

React Lifecycle Summary

Senior-Level Interview Answer

React components go through three primary lifecycle phases: mounting, updating, and unmounting. Mounting occurs when a component is first rendered, updating occurs when state, props, or context changes trigger re-renders, and unmounting occurs when a component is removed from the DOM. In modern React, the useEffect hook is used to handle lifecycle-related side effects such as API requests, subscriptions, timers, and event listeners. Cleanup functions returned from useEffect execute before unmounting or before the next effect runs, helping prevent memory leaks and stale subscriptions.

Common Interview Mistakes

❌ useEffect Runs Before Render

Correct:

Render Happens First.
 
Effects Run After Render.

❌ Cleanup Only Runs On Unmount

Correct:

Cleanup Also Runs Before
The Next Effect Executes.

❌ Parent Re-renders Never Affect Children

Correct:

Parent Re-renders Can
Trigger Child Re-renders.

❌ Lifecycle Methods Only Exist In Class Components

Correct:

Hooks Provide Lifecycle
Behavior In Functional Components.

Key Takeaways

• Mounting Phase: Component renders for the first time, executing initial layout and side effects.
• Updating Phase: Component re-renders due to changes in state, props, or context values.
• Unmounting Phase: Component is removed from the DOM, and cleanup functions run to free resources.
• Effect Cleanup: Vital for preventing memory leaks, lingering WebSockets, and orphaned timers.
• Strict Mode: In development, React 18 mounts components twice to help developers identify side effects.
• Functional Hooks: useEffect cleanly replaces legacy class lifecycle methods like componentDidMount and componentWillUnmount.