What is the Difference Between Functional and Class Components?
💡 Concept Name
Functional vs Class Components – Two ways of writing components in React: functional components are simple JavaScript functions, while class components use ES6 class syntax and have access to lifecycle methods.
📘 Quick Intro
Functional components are concise and favored in modern React, especially with the introduction of hooks. Class components were the traditional way to manage state and lifecycle events, but functional components now offer equivalent power with cleaner syntax.
🧠 Analogy / Short Story
Think of class components like an older manual car — powerful but requires more setup and effort to drive. Functional components are like modern electric cars — sleek, efficient, and easier to operate. Both get you to the same destination, but one is simpler to use with today’s tools.
🔧 Technical Explanation
- ⚙️ Functional components are JavaScript functions that return JSX.
- 🧱 Class components use ES6 class syntax and must extend
React.Component. - 🔁 State in functional components is managed using
useState; in class components, it's managed viathis.state. - 🔄 Lifecycle methods like
componentDidMountexist in class components; in functional components, useuseEffect. - 🚀 Functional components are generally shorter, easier to test, and now recommended in modern React development.
💻 Real Code Example
// Functional Component
function Greeting() {
const [name, setName] = React.useState("Dev");
return <h1>Hello, {name}!</h1>;
}
// Class Component
class GreetingClass extends React.Component {
constructor(props) {
super(props);
this.state = { name: "Dev" };
}
render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}
❓ Interview Q&A
Q1: What is the core difference between functional and class components?
A: Functional components are functions, while class components are classes that extend React.Component.
Q2: How is state handled differently in these components?
A: Functional components use useState, class components use this.state.
Q3: Which component type uses lifecycle methods directly?
A: Class components use lifecycle methods like componentDidMount().
Q4: What replaced lifecycle methods in functional components?
A: Hooks like useEffect provide similar functionality.
Q5: Which type is preferred in modern React and why?
A: Functional components, because they’re shorter, easier to test, and support hooks.
Q6: Can both component types manage state?
A: Yes, but through different mechanisms.
Q7: Can you convert a class component to a functional component?
A: Yes, especially with hooks providing access to state and effects.
Q8: Which type is more verbose?
A: Class components are typically more verbose.
Q9: Do functional components support hooks?
A: Yes, that’s how they manage state and side effects.
Q10: Are there any features available only in class components?
A: Historically yes, but now functional components with hooks cover most use cases.
📝 MCQs
Q1. Which is NOT a valid React component type?
- Class component
- Functional component
- Module component
- Both are valid
Q2. What does a class component extend?
- React.Base
- React.Core
- React.Component
- React.Super
Q3. Which hook is used for managing state in functional components?
- useEffect
- useState
- useContext
- useRef
Q4. How do class components manage state?
- With hooks
- With Redux only
- Using this.state
- They can’t
Q5. Which is more concise?
- Class component
- Functional component
- Both equal
- Depends on framework
Q6. What lifecycle method is available in class components?
- useEffect
- setTimeout
- componentDidMount
- onLoad
Q7. Which component type is more modern in React?
- Class component
- Functional component
- Hybrid component
- DOM component
Q8. Can functional components have side effects?
- No
- Only with Redux
- Yes, using useEffect
- Only in classes
Q9. Which component is easier to test?
- Class component
- Functional component
- None
- Both are equal
Q10. What is a common feature between both component types?
- They use Redux
- They define routes
- They return JSX
- They render only once
💡 Bonus Insight
With React’s evolution, functional components have become the standard. Hooks introduced a powerful way to use state, lifecycle, and context—all without writing a class. This leads to cleaner, more maintainable code in large-scale applications.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!