Почему setMen(Men); изменит состояние?

Question

[Shakir Darion]

это мой код

const App = () => {
  const [Men, setMen] = useState({ name: "dario" });
  console.log(Men)
  return (
    <div>
      <button
        onClick={() => {
          Men.name = "dario1"
          setMen(Men);
        }}
      >
        Add
      </button>
      <button
        onClick={() => {
          Men.name = "dario2"
          setMen({ ...Men });
        }}
      >
        Add1
      </button>
    </div>
  );
};

Состояние обновляется, когда я нажимаю кнопку Add, а затем - Add1. Почему setMen(Men); изменит состояние ?

Answer 1

[Vladimir Lewandowski]

С формулировкой вопроса что-то не то. При setMen(Men) не будет ре-рендера (состояние не изменится), потому что вы в сеттер передаёте тот же объект, который уже лежит в стейте (поскольку сравниваются объекты по ссылке, а изменение поля name ссылку не меняет).

При setMen({ ...Men }) вы передаёте копию (новый объект), поэтому будет ре-рендер. И Men.name = "dario2" тут ни при чем.

А правильный вариант в итоге такой:
setMan({ ...Man, name: 'new name' });

Про сравнение по ссылкам.