Как правильно обновлять состояние?

Question

[Андрей]

this.state = {
  counter: 0
}


this.setState(({counter}) => ({counter: counter + 1}))
// или

this.setState(({counter}) => {
  ++counter
})

// оба варианта работают, второй вариант через sideEffect, это считаетмя плохим тоном? если да то почему?

Comments

[0xD34F]

оба варианта работают

Неужели? Хотелось бы на это посмотреть. Как по мне - так оба нерабочие. Первый вообще синтаксически некорректен.

[Андрей]

0xD34F, спасибо, поправил

Answer 1

[Andrew Ghostuhin]

Для обновления состояния вызывается функция setState():
this.setState({welcome: "Привет Андрей"});

Изменение состояния вызовет повторный рендеринг компонента, в соответствии с чем веб-страница будет обновлена.

В то же время не стоит изменять свойства состояния напрямую, например:
this.state.welcome = "Привет Андрей";
В данном случае изменения повторного рендеринга компонента происходить не будет.

При этом нам не обязательно обновлять все его значения. В процессе работы приложения мы можем обновить только некоторые свойства. Тогда необновленные свойства будут сохранять старые значения.

Comments

[Андрей]

Andrew Ghostuhin согласен, этим мы можем избежать лишних обновлений, но а с этим вариантом что не так?

this.setState(({counter}) => {
++counter
})

офф. документация пишет что setState может заменить мои мутации https://prnt.sc/hp9i1a,
или в моем примере никак не может изменить? а имеется в виду немного другой случай что я напишу ниже.
если в доке имеется в виду этот момент, то с тем примером что выше выжодит все отлично?

this.state.counter = this.state.counter + 1;
this.setState({counter: 10})

[Andrew Ghostuhin]

Андрей, по идее всё должно быть отлично, нет, не заменит твои мутации никак, по крайней мере в том случае, что ты описал

[Андрей]

Andrew Ghostuhin, да, но во втором случае как раз и происходит замена мутированных данных, наверно об этом шла речи в документации, или у тебя есть другие варианты?

[Andrew Ghostuhin]

Андрей, этого достаточно я думаю будет