Home/ Questions/Q 411
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T00:30:32+00:00 In:

What are the differences between class and functional components in React?

  • 0
  • 0

When do we need class vs functional components?

beginnerinterviewquestionsreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Finn Phillips
    Beginner

    React initially relied heavily on class components, but with the introduction of hooks in React 16.8, functional components became the go-to choice for most developers.

    ✅ 1️⃣ Key Differences:

    Feature Class Components Functional Components
    Syntax ES6 Classes JavaScript Functions
    State Management Uses this.state and this.setState() Uses useState hook
    Lifecycle Methods componentDidMount, componentDidUpdate, etc. useEffect hook
    Hooks Support ❌ (Can’t use hooks directly) ✅ (Supports hooks)
    this Keyword Required (this.props, this.state) Not needed
    Readability More verbose Concise & cleaner
    Performance Slightly heavier (due to method bindings) Lighter & faster
    Adoption Post-Hooks Less commonly used Industry standard

    🛠️ 2️⃣ Code Examples:

    🔹 Class Component:

    import React, { Component } from 'react';

class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

increment = () => {
this.setState({ count: this.state.count + 1 });
};

render() {
return (
<div>
<h2>Count: {this.state.count}</h2>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}

export default Counter;

    🔹 Functional Component (with Hooks):

    import React, { useState } from 'react';

const Counter = () => {
const [count, setCount] = useState(0);

return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};

export default Counter;

    ✅ 3️⃣ Lifecycle Methods vs useEffect:

    🔹 Class Component Lifecycle:

    • componentDidMount — after component mounts
    • componentDidUpdate — after component updates
    • componentWillUnmount — before unmounting

    🔹 Equivalent in Functional Components:

    Using useEffect:

    import React, { useEffect } from 'react';

useEffect(() => {
console.log("Component mounted!");

return () => {
console.log("Component unmounted!"); // Cleanup
};
}, []); // Empty dependency array mimics componentDidMount

    🔥 4️⃣ When to Use Class vs Functional Components:

    Scenario Recommended Approach
    New Projects ✅ Functional Components
    Legacy Codebases ⚡ Might still use Classes
    Simple UI (No State/Effects) ✅ Functional Components
    Complex State or Side Effects ✅ Functional (with Hooks)
    Third-Party Libraries Dependent on Classes ⚡ Class Components (rare)

    ⚡ 5️⃣ Why Functional Components Are Preferred Today:

    1. Hooks unlocked their full potential — state, effects, refs, context, etc.
    2. Cleaner & less boilerplate — no constructors, bindings, or this.
    3. Easier to test and refactor.
    4. Better performance — lighter footprint without class overhead.

    💡 6️⃣ Fun Fact:

    • The React team recommends functional components for almost all new development.
    • Features like React Server Components and Concurrent Mode are designed with functional components in mind.