Разница между присваиванием this.state.x = 4 и this.setState({x: 4})

Я не понимаю в чем разница между вот этими присваиваниями в React:
this.state.x = 4;
this.setState({ x: 4 })
Так же я не понимаю, почему, когда я присваиваю значение первым способом, то если запустить alert сразу после присваивания, я увижу то значение, которое я только что присвоил. Если же я присвоил значение вторым способом, по alert выведет предыдущее значение этой переменной. Из-за этого была проблема с программой. Я присваивал вторым способом, думал, что в этой же функции уже будет новое значение, а оказалось - нет

Ответ

Первый способ - варварски изменить состояние напрямую, не используя внутренние механизмы оптимизации реакта. Документация большими буквами говорит что так делать не надо и стоит считать стейт иммутабельным.
Второй способ - правильный и делать надо так. Другое дело, что реакт изменяет стейт не сразу, а когда посчитает нужным согласно логике приложения. Если это конфликтует с логикой вашего приложения - значит вы уже чего-то там неправильно сделали, не согласуясь с принципами заложенными в реакт.
Если вам надо что-то делать когда state уже изменился, то setState вторым параметром принимает колбек.