Задать вопрос
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 вызывается два раза
	}));
}

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

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

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽