I’ve came across to a case, which is simply mutating the state directly and then call the setState on an Input component.

state.value = "firstValue"
setState({value: "foo"})

This is a very bad practice as one can imagine, but the confusing thing is, the rendered value is “firstValue” instead of “foo”.

In this example, I thought the rendered value in the component would be “foo” since setState is asynchronous and will take place as the last one.

What’s going on under the hood and why the directly mutating value is rendering in the Input component?