tarrsalah tarrsalah - 26 days ago 5
Javascript Question

Why calling react setState method doesn't mutate the state immediately?

I'm reading Forms section of documentation and just tried this code to demonstrate

onChange
usage (JSBIN).

var React= require('react');

var ControlledForm= React.createClass({
getInitialState: function() {
return {
value: "initial value"
};
},

handleChange: function(event) {
console.log(this.state.value);
this.setState({value: event.target.value});
console.log(this.state.value);

},

render: function() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange}/>
);
}
});

React.render(
<ControlledForm/>,
document.getElementById('mount')
);


When I update the
<input/>
value in the browser, the second
console.log
inside the
handleChange
callback prints the same
value
as the first
console.log
, Why I can't see the result of
this.setState({value: event.target.value})
in the scope of
handleChange
callback?

Answer

From React's documentation:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

If you want a function to be executed after the state change occurs, pass it in as a callback.

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});
Comments