Explain Redux : mutation and asynchronicity

Question

I could not understand what the below lines on first page of REDUX mean https://redux.js.org/introduction/motivation

This complexity is difficult to handle as we're mixing two concepts that are very hard for the human mind to reason about: mutation and asynchronicity. I call them Mentos and Coke. Both can be great in separation, but together they create a mess. Libraries like React attempt to solve this problem in the view layer by removing both asynchrony and direct DOM manipulation. However, managing the state of your data is left up to you. This is where Redux enters.

Note: Marked bold are the strong lines I was enable to understand.

Answer 1

Mutation simply means you will need to be able to change the state of things (variables, global store etc) and also you will need to be able to react to when those things change.

Asynchronicity means that events may occur at different times - you can't predict precisely when they will occur or when they will complete.

Therefore, in an app that has to be able to change data (mutation) and can have that data change asynchronously, things get difficult.

I'd suggest you read up more on redux (and in general, libraries that promote a specific "flow" of data mutations). At the heart of the issue is that if data can mutate at any time whereby you are changing the data directly and it can be changed asychronously (for instance via API calls to external services) then without careful thought/use of libraries and understanding, your app can turn into an unholy mess.