Sobes.tech
Back to tasks
Junior — Senior
25

Поиск причины неправильного инкремента счётчика в React‑компоненте

Get help with live coding in real time with Sobes Copilot
Task condition

При каждом нажатии на первую кнопку ожидается, что значение будет возрастать на 1, отражая общее количество кликов. В текущей реализации счётчик увеличивается лишь один раз. Необходимо проанализировать код, выяснить, почему состояние не меняется при каждом событии, и предложить исправление.

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

export function App() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState({
    name: 'Anton',
  });

  const handleBtnClick2 = () => {
    count2.name = "Alex";
    console.log(count2.name);
    setCount2(count2);
  };

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

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

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