Обнаружение багов в React‑компоненте с хуками

Условие

Найдите и исправьте ошибки в следующем React‑компоненте, использующем хук useState.

import React, { useState } from 'react';

export const MyComponent = ({ title }) => {
  const [count, setCount] = useState(0);

  function incrementCount() {
    count += 1;
  }

  return (
    <div>
      <h1>{props.title}</h1>
      <p>Count: {count}</p>
      <button onClick={incrementCount()}>Click me!</button>
      <p>{props.subtitle}</p>
    </div>
  );
};

Ответ

Нужно обновлять count через setCount, обращаться к деструктурированным props и передавать обработчик клика, а не вызывать его при рендере. subtitle тоже должен быть получен из props.

import { useState } from 'react';

export const MyComponent = ({ title, subtitle }) => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(value => value + 1)}>Click me!</button>
      {subtitle != null && <p>{subtitle}</p>}
    </div>
  );
};

Прямое присваивание count нарушает работу с состоянием и здесь ещё меняет const. Идентификатор props в исходной функции не объявлен. Функциональное обновление считает новое значение из актуального предыдущего состояния.