dmitry-l
@dmitry-l

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

У меня в 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 вызывается два раза
	}));
}

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

Полная песочница здесь
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
dmitry-l
@dmitry-l Автор вопроса
Оказывается таковы особенности работы React.StrictMode. В режиме develop StrictModeрендерит компонент дважды, чтобы выявить какие-то проблемы с кодом и предупредить о них. create-react-app включает данный режим по умолчанию. Если его убрать или сбилдить проект, то в production сборке повторный рендеринг не возникает.
Касательно того как изменять объект - можно и так и так.
Если я в чем-то не прав, надеюсь меня поправят или оставят свой ответ.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 окт. 2020, в 11:50
3000 руб./за проект
25 окт. 2020, в 11:42
3000 руб./за проект
25 окт. 2020, в 10:25
6000 руб./за проект