Как правильно использовать useState с объектом?

Question

[Dmitry]

У меня в state хранится объект:

const [objCounter, setObjCounter] = useState({
	title: "counter",
	date: new Date()
});

При клике на кнопку вызывается changeTitleи к свойству title в конце добавляется случайное число из функции getRandomNumber:

const getRandomNumber = () => {
  console.log("getRandomNumber called");
  return Math.round(Math.random() * 20);
};

Вопрос:
Почему в таком варианте при клике на кнопку getRandomNumberсработает только 1 раз:

const changeTitle = () => {
	setObjCounter({
	  ...objCounter,
	  title: `new title ${getRandomNumber()}` // console.log вызывается один раз
	})
};

а в таком (с передачей callback с предыдущим состоянием) - два раза?

const changeTitle = () => {
	setObjCounter((prevState) => ({
	  ...prevState,
	  title: `new title ${getRandomNumber()}` // console.log вызывается два раза
	}));
}

Какой вариант правильный?

Полная песочница здесь.

Answer 1

[Dmitry]

Оказывается таковы особенности работы React.StrictMode. В режиме develop StrictModeрендерит компонент дважды, чтобы выявить какие-то проблемы с кодом и предупредить о них. create-react-app включает данный режим по умолчанию. Если его убрать или сбилдить проект, то в production сборке повторный рендеринг не возникает.
Касательно того как изменять объект - можно и так и так.
Если я в чем-то не прав, надеюсь меня поправят или оставят свой ответ.

Comments

[Nikolay Matyushkin]

Можно просто убрать обёртку React.StrictMode

[Dmitry]

Devilz_1, да, я об этом и написал