Class-Based vs Functional Components in React — Key Differences for Interviews

Learn the key differences between class-based and functional components in React, including lifecycle methods, hooks, state management, and interview tips.

This is one of the most common React interview questions, as it directly relates to React lifecycle methods.

React components are the building blocks of a React application, and understanding their differences helps you write efficient, maintainable code.

Components in React

In React, the Document Object Model (DOM) is where all elements are rendered. Manipulating the DOM — whether loading, updating, or removing content — often involves lifecycle methods.

React has three main lifecycle phases:

1. Mounting – Component is being inserted into the DOM.

2. Updating – Component is being re-rendered due to changes in state or props.

3. Unmounting – Component is being removed from the DOM.

I) Class-Based Components

Class-based components can be stateful or stateless, depending on whether they manage internal state.

Key Features

1. Require a render() method to return JSX.

2. Can use both props and state.

3. Support all lifecycle methods like componentDidMount(), componentDidUpdate(), and componentWillUnmount().

Common Lifecycle Methods

• componentDidMount() — Called once after the initial render.

  Example use: Fetching API data on page load.

• componentDidUpdate() — Called after a component updates (state/props change).

• componentWillUnmount() — Called before the component is removed from the DOM.

  Example use: Cleaning up event listeners or timers.

• constructor() — Runs before rendering; useful for initializing state.

JavaScript

class Counter extends React.Component {
  constructor() {
    super()
    this.state = { count: 0 } // Initializing state
  }

  componentDidMount() {
    console.log('Component mounted!')
  }

  componentDidUpdate() {
    console.log('Component updated!')
  }

  componentWillUnmount() {
    console.log('Component will unmount!')
  }

  render() {
    return <h1>{this.state.count}</h1>
  }
}

II) Functional Components

Functional components were originally stateless, but since React 16.8, hooks allow them to manage state and handle lifecycle logic.

Key Features

1. No render() method — simply return JSX.

2. Use useState() for state and useEffect() for lifecycle events.

3. Accept props as arguments.

Using useEffect() for Lifecycle Events

JavaScript

import React, { useEffect, useState } from 'react'

function Counter({ number }) {
  const [count, setCount] = useState(0)

  // Mounting
  useEffect(() => {
    console.log('Functional component: Mounted')
  }, [])

  // Updating
  useEffect(() => {
    console.log('Functional component: Updated')
  }, [number])

  // Unmounting
  useEffect(() => {
    return () => {
      console.log('Functional component: Unmounted')
    }
  }, [number])

  return <h1>{count}</h1>
}

Class vs Functional Components — Quick Comparison

Interview Tip

• If asked in an interview, mention that hooks have largely replaced the need for most class-based components, but class components are still found in many legacy projects.

• Show that you understand lifecycle mapping between classes and hooks:

  • componentDidMount → useEffect(..., [])

  • componentDidUpdate → useEffect(..., [dependency])

  • componentWillUnmount → Cleanup function in useEffect

📌 Resources:

• React Docs — Class Components

• React Docs — useEffect Hook

Powered by wisp