Suggest an edit

Improve this article

Refine the answer for “Class vs functional component”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. Syntax

A **class component** is an ES6 class that **extends** `React.Component`
and must have a `render()` method.

```javascript
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
```

A **functional component** is a **plain JS function** that takes `props`
and returns JSX.

```javascript
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
```

In other words, a functional component is a "pure function",
while a class component is a full object with state and methods.

---

## 2. Working with state

**In a class component:**

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

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

render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}
```

**In a functional component (hooks):**

```javascript
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

**Conclusion:**
hooks (`useState`, `useEffect`, and others) give functional components
the ability to have state - previously this was available only to classes.

---

## 3. Component lifecycle

**Class components** have special lifecycle methods:

```javascript
class Example extends React.Component {
  componentDidMount() {
    console.log("Mounted");
  }

componentDidUpdate() {
    console.log("Updated");
  }

componentWillUnmount() {
    console.log("Unmounted");
  }
}
```

**Functional components** do the same thing through hooks (`useEffect`):

```javascript
function Example() {
  useEffect(() => {
    console.log("Mounted or updated");

return () => console.log("Unmounted");
  }, []);
}
```

The difference:

- classes use methods;
- functions use hooks and closures.

---

## 4. The `this` context

In **classes** you must explicitly work with `this`:

```javascript
this.state
this.props
this.setState()
this.handleClick = this.handleClick.bind(this)
```

In **functional components** there is no `this` at all:

```javascript
const [count, setCount] = useState(0);
```

The code becomes simpler, without `bind`, without context confusion.

---

## 5. Using hooks

Hooks are available **only in functional components**:

```javascript
useState, useEffect, useMemo, useCallback, useRef, useContext
```

**Hooks are not available in classes** - instead there are the old mechanisms:

- `state` + `setState`
- lifecycle methods
- context through `Context.Consumer`

---

## 6. Performance and readability

| Comparison | Functional | Class |
|---|---|---|
| Code | Short, concise | More verbose |
| Context | No `this` | Methods must be bound |
| State | Through hooks (`useState`) | Through `this.state` |
| Logic | Split by hooks | Scattered across methods |
| Optimization | `React.memo`, `useMemo` | `PureComponent`, `shouldComponentUpdate` |
| Testing | Easier | Harder because of `this` |

---

## 7. Support and relevance

- Class components appeared first (React 0.13-15).
- Starting with **React 16.8 (2019)**, **hooks** appeared - and they **replaced classes**.
- Today **everything new is written with functional components**.
- Classes are still supported but are considered "legacy".

---

## 8. Example of "the same component" in both styles

**Class version:**

```javascript
class Hello extends React.Component {
  state = { name: "Alex" };

render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}
```

**Functional version:**

```javascript
function Hello() {
  const [name, setName] = useState("Alex");
  return <h1>Hello, {name}</h1>;
}
```

Same result, but the functional version is simpler, more compact, and clearer.

---

## 9. Summary

| Criterion | Class component | Functional component |
|---|---|---|
| Syntax | Class + `render()` | Plain function |
| State | Through `this.state` | Through `useState` |
| Update | `this.setState()` | `setState` from a hook |
| Lifecycle | Methods (`componentDidMount`) | Hooks (`useEffect`) |
| `this` context | Present | Absent |
| Performance | Slower on large trees | Faster and lighter |
| Support | Old standard | Modern standard |
| Logic reuse | Through HOC/Render Props | Through hooks |

---

**Final definition:**

> A **class component** is the "old" way of describing components through classes and lifecycle methods.
> A **functional component** is the "new" way through plain functions and hooks - simpler, lighter, and more declarative.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts641 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.