Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить shouldComponentUpdate()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Визначення

> `shouldComponentUpdate(nextProps, nextState)`
> - це **метод життєвого циклу**, який викликається **перед повторним рендером**.
> Він повинен **повернути** `true` **або** `false`, щоб React зрозумів, чи потрібно виконувати `render()`.

---

## Коли викликається

Послідовність при оновленні компонента:

```javascript
props/state змінилися
   ↓
shouldComponentUpdate()   ← викликається
   ↓ (якщо повернув true)
render()
   ↓
commit phase → componentDidUpdate()
```

Якщо метод повертає `false`, React **пропускає render і commit-фазу** для цього компонента та його нащадків.

---

## Сигнатура

```javascript
shouldComponentUpdate(nextProps, nextState) {
  // повернути true → компонент перерендериться
  // повернути false → React пропустить оновлення
}
```

| Аргумент | Що містить |
|---|---|
| `nextProps` | Нові пропси, які компонент має отримати |
| `nextState` | Новий стан (state), який буде встановлено |

---

## Приклад

```javascript
class Counter extends React.Component {
  state = { count: 0 };

shouldComponentUpdate(nextProps, nextState) {
    // Перерендер тільки якщо count змінився
    return nextState.count !== this.state.count;
  }

render() {
    console.log('render');
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}
```

**Що відбувається:**

- При `setState` React викликає `shouldComponentUpdate(nextProps, nextState)`.
- Якщо повертається `true` -> React викликає `render()`.
- Якщо `false` -> React **пропускає** перемальовку.

---

## Приклад з пропсами

```javascript
class UserCard extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.user.id !== this.props.user.id; // порівняння за id
  }

render() {
    console.log('render');
    return <div>{this.props.user.name}</div>;
  }
}
```

Якщо батьківський компонент щоразу передає **новий об'єкт** `user`, але з тим самим `id`,
і `shouldComponentUpdate` поверне `false`, то React **не буде ререндерити компонент**.

---

## Важливо пам'ятати

- Метод **повинен бути чистим** - не викликати побічні ефекти, не змінювати стан.
- **Не викликається при монтуванні**, тільки при **оновленнях**.
- React **ігнорує** його, якщо використовується `PureComponent` (у ньому вже реалізовано "поверхневе порівняння").

---

## Аналог у функціональних компонентах

У функціональних компонентах `shouldComponentUpdate` не існує напряму.
Але його поведінку можна **відтворити через**:

### `React.memo()`

```javascript
const UserCard = React.memo(function UserCard({ user }) {
  console.log('render');
  return <div>{user.name}</div>;
});
```

React.memo робить те саме - **поверхнево порівнює** старі і нові props.
Якщо однакові - не викликає компонент заново.

### Кастомне порівняння (аналог `shouldComponentUpdate`)

```javascript
const UserCard = React.memo(
  function UserCard({ user }) {
    console.log('render');
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => prevProps.user.id === nextProps.user.id
);
```

Тут другий аргумент (`areEqual`) - це **інвертована логіка** порівняно з `shouldComponentUpdate`:
якщо `areEqual()` повертає **true**, компонент **не оновлюється**.

---

## Типові сценарії використання

| Мета | Приклад |
|---|---|
| Оптимізація продуктивності | Уникнути зайвих перерендерів при передачі незмінних даних |
| Контроль оновлення | Оновлювати компонент тільки при зміні конкретного поля |
| Порівняння пропсів | Реалізувати глибоке або точкове порівняння даних |

---

## Порівняння з іншими оптимізаціями

| Підхід | Де використовується | Що робить |
|---|---|---|
| `shouldComponentUpdate()` | Класові компоненти | Повний контроль, вручну |
| `React.PureComponent` | Класові компоненти | Вбудоване поверхневе порівняння |
| `React.memo()` | Функціональні компоненти | Аналог `PureComponent` |
| `useMemo()` / `useCallback()` | Функціональні компоненти | Мемоізація значень і функцій, щоб не змінювати посилання і не тригерити оновлення |

---

## Підсумок

> `shouldComponentUpdate()` дозволяє **вручну контролювати**, чи повинен React перерендерити компонент при зміні `props` або `state`.

Якщо повертаєш `false` ->
React **пропускає render і commit**, економить ресурси, підвищує продуктивність.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати525 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.