Разбор поведения при нажатии кнопки

Условие

Определите, как изменится состояние приложения после клика по кнопке.

 export default function CounterApp()
    let currentCount = 0;

const increment = () => {
    currentCount += 1;
    }
return (
    <div className="App">
    <p>'Чтo произойдет при клике по кнопке</p>
    <hi>Count = {currentCount}</hi>
    <button onClick={increment}-'кнопка</button>
    </div>
});

Ответ

Исходный компонент не компилируется из-за повреждённого синтаксиса. Даже после исправления скобок изменение обычного let currentCount не вызовет рендер, поэтому видимый счётчик не обновится.

export default function CounterApp() {
  const [currentCount, setCurrentCount] = React.useState(0);
  return <div className="App">
    <h1>Count = {currentCount}</h1>
    <button onClick={() => setCurrentCount(value => value + 1)}>Кнопка</button>
  </div>;
}

Нужен импорт React. Следует исправить отсутствие фигурной скобки функции, hi вместо h1, повреждённый открывающий button и лишнее закрытие. Обычная локальная переменная также создавалась бы заново при следующем рендере; useState сохраняет данные между рендерами.