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.