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

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

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

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

Контент

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

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

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

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

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

## 1. Зміна **state (стану)**

Кожен виклик `setState()` чи `setCount()` (у `useState`) **запускає повторний рендер** компонента.

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

console.log('Ререндер!');

return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
```

Кожен клік викликає `setCount`,
`count` змінюється,
React **повторно викликає компонент**, щоб оновити UI.

Якщо ти викличеш `setCount(count)` з тим самим значенням, React **не ререндеритиме**,
бо стан не змінився (React робить поверхневе порівняння).

---

## 2. Зміна **props**

Якщо **батьківський компонент** передає нові props,
React **ререндерить дочірній компонент**, щоб він відобразив оновлені дані.

```javascript
function Child({ value }) {
  console.log('Ререндер Child!');
  return <p>{value}</p>;
}

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

Щоразу, коли `count` змінюється, у `<Child />` **змінюється prop** `value`,
і він **ререндериться**.

Щоб **уникнути непотрібних ререндерів**, можна використати
`React.memo(Child)` - тоді компонент ререндериться **лише при зміні пропсів**.

---

## 3. Зміна **context**

Якщо ти використовуєш `useContext()` і значення в `Context.Provider` змінилося,
**усі споживачі цього контексту** будуть **ререндерені**.

```javascript
const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Перемкнути тему
      </button>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  console.log('Ререндер через контекст!');
  return <div className={theme}>Toolbar</div>;
}
```

При зміні теми (`setTheme`) контекст оновлюється,
усі компоненти, що використовують `useContext(ThemeContext)`, **ререндеряться**.

---

## 4. Ререндер батька → ререндер нащадків

Якщо **батько ререндериться**, React **за замовчуванням** викликає ререндер усіх його нащадків,
**навіть якщо їхні props не змінилися**.

Щоб цього уникнути:

- обгорни дочірній компонент у `React.memo()`;
- або використовуй **мемоізовані значення й колбеки** через `useMemo()` і `useCallback()`.

---

## 5. Виклик `forceUpdate()` (рідко)

У класових компонентах можна явно викликати `this.forceUpdate()`,
що змусить React **виконати ререндер**, навіть якщо `state` і `props` не змінилися.

---

## 6. Зміни в батьківському дереві або ключах (`key`)

Якщо у компонента змінюється **ключ (**`key`**)**, React **перемонтує** його (unmount → mount),
що фактично **перемальовує його з нуля**.

---

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

- **Ререндер ≠ оновлення DOM.**
React може викликати компонент заново, але **не торкнеться DOM**,
якщо результат JSX **не змінився** (diff = 0).
- React оптимізує це за допомогою **Virtual DOM** і **Reconciliation**.

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

Для рев’юера

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

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