React‑компонент с увеличивающимся при нажатии счётчиком

Условие

Реализуйте React‑компонент, в котором при каждом клике по кнопке значение счётчика, отображаемое на экране, будет увеличиваться.

Ответ

Храните счётчик в useState, а в обработчике кнопки вызывайте setCount с функцией от предыдущего значения. React перерисует число после обновления состояния.

import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <section>
    <p>Счётчик: {count}</p>
    <button type="button" onClick={() => setCount(value => value + 1)}>
      Увеличить
    </button>
  </section>;
}

Обычная локальная переменная не запускает рендер и сбрасывается при следующем вызове компонента. Функциональное обновление корректно использует предыдущее состояние и при пакетной обработке нескольких обновлений.