Обновление имени по нажатию кнопки в React‑компоненте

Условие

В данном React‑компоненте App требуется добавить новое состояние, представляющее объект с полем name, которое изначально содержит строку «Антон». Необходимо также разместить кнопку, при клике по которой значение поля name должно измениться на «Александр». При этом в компоненте уже присутствует состояние счётчика count и обработчики кликов, использующие useCallback и useEffect. Ваша задача – интегрировать новое состояние и логику изменения имени, не нарушая существующий код.

import { useCallback, useEffect, useMemo, useState } from "react";

export function App() {
  const [count, setCount] = useState(0);

  const btnClick = () => {
    setCount(count + 1);
  };

  const handleBtnClick = useCallback(() => {
    btnClick();
  }, []);

  // function btnClick2() {
  //   const bigArr = Array(1000000).fill("user");
  //   bigArr.forEach((el, i, arr) => {
  //     arr[i] = arr[i] + i;
  //   });
  //   setCount(count + 1);
  // }

  return (
    <div>
      <button onClick={handleBtnClick}>{count}</button>
      {/* <button onClick={btnClick2}>Compute Heavy</button> */}
      <div />
      <input type="text" />
    </div>
  );
}

Ответ

Добавьте отдельный state-объект с name и обновляйте его неизменяемо. Заодно устраните устаревшее замыкание счётчика функциональным обновлением.

Внутри App:

const [user, setUser] = useState({ name: 'Антон' });
const handleBtnClick = useCallback(() => {
  setCount(value => value + 1);
}, []);

В JSX рядом с существующими элементами:

<p>{user.name}</p>
<button onClick={() => setUser(value => ({ ...value, name: 'Александр' }))}>Изменить имя</button>

Старые btnClick/handleBtnClick заменяются приведённым handler: пустые зависимости исходного callback удерживали начальный count.