Проверка ререндеринга при клике на вторую кнопку в React

Условие

Нужно выяснить, произойдёт ли повторный рендер компонента, когда пользователь нажимает на кнопку, отвечающую за изменение свойства name во втором состоянии.

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';
  };

  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>
  );
}

Ответ

Вторая кнопка не планирует рендер: она мутирует count2.name, но вообще не вызывает setCount2. Изменение может проявиться позже при обновлении другого состояния.

Исправьте обе кнопки:

const handleBtnClick2 = () => setCount2(previous => ({ ...previous, name: 'Alex' }));
const handleBtnClick = useCallback(() => {
  setCount(previous => previous + 1);
}, []);

В исходнике первая мемоизированная функция хранит btnClick с начальным count === 0, поэтому последующие нажатия пытаются снова выставлять 1. Новая ссылка объекта нужна для корректного обновления count2; мутировать существующее состояние нельзя, даже если другой рендер случайно показывает результат.