Отображение значения в консоли при нажатии на кнопку в React‑компоненте

Условие

Необходимо реализовать вывод в консоль свойства name объекта состояния при нажатии на вторую кнопку.

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

export function App() {
  const [counter, setCounter] = useState(0);
  const [user, setUser] = useState({
    name: 'Anton',
  });

  const handleSecondClick = () => {
    console.log(user.name);
    // При желании можно изменить имя
    // setUser({ ...user, name: 'Alex' });
  };

  const increment = () => {
    setCounter(counter + 1);
  };

  const handleFirstClick = useCallback(() => {
    increment();
  }, []);

  return (
    <div>
      <button onClick={handleFirstClick}>{counter}</button>
      <button onClick={handleSecondClick}>{user.name}</button>
      {/* <button onClick={btnClick2}>Compute Heavy</button> */}
      <div />
      <input type="text" />
    </div>
  );
}

Ответ

Вторая кнопка уже вызывает handleSecondClick, который печатает текущее user.name: изначально Anton. Дополнительный эффект для этого не нужен.

Отдельный дефект есть у первой кнопки: useCallback с пустыми зависимостями удерживает initial counter. Замените его тело на setCounter(value => value + 1). Если включить setUser в обработчике второй кнопки, console.log до обновления напечатает имя из текущего рендера, не будущего.