Class Components

Subject: React

2️⃣ 🕰️ Class Components (Legacy)

📘 Definition:

A JavaScript class that extends React.Component and implements a render() method.

🔧 Syntax:

🚀 Try it in Compiler

🧪 Example with State:

🚀 Try it in Compiler

⚡ Features:

  • Uses this.state and this.props
  • Can define lifecycle methods (componentDidMount, componentDidUpdate)
  • More verbose compared to functional components
  • Was required before Hooks were introduced in React 16.8

🔄 Functional vs Class Components: Comparison

FeatureFunctional ComponentClass Component
SyntaxFunction / Arrow FunctionClass extends React.Component
State ManagementuseState()this.state
Side EffectsuseEffect()componentDidMount() etc.
Props Usageprops as parameterthis.props
Code LengthShort and simpleMore boilerplate
Modern/Legacy✅ Modern Standard🕰️ Legacy / Still Supported
PerformanceSlightly betterSlightly heavier

➡️ Also read: Functional Components

Next: Lifecycle