Suggest an edit

Improve this article

Refine the answer for “Why did hooks replace class components?”. 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. Hooks are simpler than classes

### The problem with classes:

- You have to understand how `this` works.
- You often have to do **method binding** manually:

```javascript
  this.handleClick = this.handleClick.bind(this);
  ```
- Errors like `Cannot read property 'setState' of undefined` are a common occurrence.

### With hooks:

- There is no `this` at all.
- Everything is a regular function:

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

---

## 2. Hooks make the code cleaner and more logical

### The problem in classes:

Logic related to one task (for example, working with an API)
is scattered across **different lifecycle methods**:

```javascript
componentDidMount() { subscribe(); }
componentDidUpdate() { checkUpdate(); }
componentWillUnmount() { unsubscribe(); }
```

### With hooks:

Everything is in one place:

```javascript
useEffect(() => {
  subscribe();
  return () => unsubscribe();
}, []);
```

The code becomes **more compact and logically grouped**.

---

## 3. Hooks let you reuse logic

### The problem with classes:

To reuse logic between components, you had to use:

- **HOC (Higher-Order Components)** - a nesting of "wrapper hell",
- or **Render Props** - complex JSX structures.

### With hooks:

You can simply extract repeated logic into a **custom hook**:

```javascript
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() =>
    JSON.parse(localStorage.getItem(key)) ?? initialValue
  );

useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);

return [value, setValue];
}
```

Used like a regular hook:

```javascript
const [theme, setTheme] = useLocalStorage('theme', 'light');
```

---

## 4. Hooks work better with modern technologies

- React hooks **combine great** with TypeScript, Suspense, Concurrent Rendering, Server Components.
- Classes integrate poorly with newer React 18+ capabilities.
- Hooks let you **flexibly manage state and performance** (`useMemo`, `useCallback`, `useTransition`).

---

## 5. Classes are harder to optimize and test

- It is not always obvious when lifecycle methods get called.
- Testing a class component is harder: you have to mock the instance.
- Function components with hooks are **just pure functions**, so they are easy to test.

---

## Summary: why React moved to hooks

| Problem with classes | Solution with hooks |
| --- | --- |
| `this` and bind | No `this`, pure functions |
| Scattered lifecycle logic | useEffect combines all related logic |
| Hard-to-reuse logic | Custom hooks |
| Poor optimization and testing | Pure functions, better predictability |
| Poor compatibility with new React features | Full compatibility with the modern API |

---

**Conclusion:**
Hooks made React more **declarative, functional, and modular**.
That is why today **hooks are the standard**, and classes remain only to support legacy projects.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.