Is there a synchronous alternative of setState() in Reactjs

Question

According to the explaination in the docs:

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.

So since setState() is asyncronous and there is no guarantee about its synchronous performance. Is there an alternative of setState() that is syncronous.

For example

//initial value of cnt:0
this.setState({cnt:this.state.cnt+1})
alert(this.state.cnt);    //alert value:0

Since the alert value is previous value so what is the alternative that will give alert value:1 using setState().

There are few questions on Stackoverflow which is similar to this question but no where I am able to find the correct answer.

Answer 1

As you have read from the documentation, there is NO sync alternative, reason as described is performance gains.

However I presume you want to perform an action after you have changed your state, you can achieve this via:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     x: 1
    };
    
    console.log('initial state', this.state);
  }
  
  updateState = () => {
   console.log('changing state');
    this.setState({
      x: 2
    },() => { console.log('new state', this.state); })
  }
  
  render() {
    return (
      <div>
      <button onClick={this.updateState}>Change state</button>
    </div>
    );
   
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

You could wrap setState in a function returning a promise, and then use this function with the await keyword to cause your code to wait until the state has been applied.

Personally, I would never do this in real code, instead I would just put the code I wish to execute after the state update in the setState callback.

Nerveless, here is an example.

class MyComponent extends React.Component {

    function setStateSynchronous(stateUpdate) {
        return new Promise(resolve => {
            this.setState(stateUpdate, () => resolve());
        });
    }

    async function foo() {
        // state.count has value of 0
        await setStateSynchronous(state => ({count: state.count+1}));
        // execution will only resume here once state has been applied
        console.log(this.state.count);  // output will be 1
    }
} 

In the foo function, the await keyword causes the code execution to pause until the promise returned by setStateSynchronous has been resolved, which only happens once the callback passed to setState is called, which only happens when the state has been applied. So execution only reaches the console.log call once the state update has been applied.

docs for async/await:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Answer 3

If this is required I would suggest using a callback in your setState function (and I also suggest using a functional setState).

The callback will be called after the state has been updated.

For example, your example would be

//initial value of cnt:0
this.setState(
    (state) => ({cnt: state.cnt+1}),
    () => { alert(this.state.cnt)}
)

as per documentation here : https://facebook.github.io/react/docs/react-component.html#setstate

Note: Official docs say, "Generally we recommend using componentDidUpdate() for such logic instead."

Answer 4

No, there is not. React will update the state when it sees fit, doing things such as batching setState calls together for efficiency. It may interest you that you are able to pass a function into setState instead, which takes the previous state, so you may choose your new state with good knowledge of the previous one.

Answer 5

It may sound weird but yes setState can work synchronously in react. How so? This is POC which I've created to demonstrate it.

Pasting the only app JS code.

Maybe it's possible that I'm missing something but this was actually happening in my application that's when I came to know about this effect.

Correct me if this kind of behavior is expected in React which I'm unaware of. When there are multiple setState on main thread the setState runs a Batch combining all the setState on the main method. Whereas the Scenario is different when the same things go inside the async Function.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
    this.asyncMethod = this.asyncMethod.bind(this);
    this.syncMethod = this.syncMethod.bind(this);
  }

  asyncMethod() {
    console.log("*************************")
    console.log("This is a async Method ..!!")
    this.setState({
      counter: this.state.counter + 1
    }, () => {
      console.log("This is a async Method callback of setState. value of counter is---", this.state.counter);
    })
    console.log("This is a async Method on main thread. value of counter is---", this.state.counter);
    console.log("*************************")
  }

  syncMethod() {
    var that = this;
    console.log("*************************")
    console.log("This is a sync Method ..!!")
    that.setState({counter: "This value will never be seen or printed and render will not be called"});
    that.setState({counter: "This is the value which will be seen in render and render will be called"});
    setTimeout(() => {
      that.setState({counter: "This is part is synchronous. Inside the async function after this render will be called"});
      console.log("setTimeout setState");
      that.setState({counter: "This is part is aslso synchronous. Inside the async function after this render will be called"});
    }, 10)
    console.log("This is a sync Method on Main thread. value of counter is---", this.state.counter);
    console.log("*************************")
  }

  render() {
    console.log("Render..!!",this.state.counter);
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
        </header>
          <button onClick={this.asyncMethod}>AsyncMethod</button>
          <button onClick={this.syncMethod}>SyncMethod</button>
      </div>
    );
  }
}

export default App;

Answer 6

I was able to trick React into calling setState synchronously by wrapping my code in setTimeout(() => {......this.setState({ ... });....}, 0);. Since setTimeout puts stuff at the end of the JavaScript event queue, I think React detects the setState is within it and knows it can't rely on a batched setState call (which would get added to the end of the queue).

Answer 7

Yes, there is a method with which we can make our synchronous setState. But its performance maybe not good as normally For example, we have

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     data: 0
    };
  }

  changeState(){
   console.log('in change state',this.state.data);
   this.state.data = 'new value here'
   this.setState({});
   console.log('in change state after state change',this.state.data);
  }

  render() {
    return (
      <div>
      <p>{this.state.data}</p>
      <a onClick={this.changeState}>Change state</a>
    </div>
    );

  }
}  

In this example, we change the state first and then render our component.

Answer 8

Use React Hooks instead:

function MyComponent() {
  const [cnt, setCnt] = useState(0)

  const updateState = () => {
    setCnt(cnt + 1)
  }

  useEffect(() => {
    console.log('new state', cnt)
  }, [cnt])

  return (
    <div>
      <button onClick={updateState}>Change state</button>
    </div>
  )
}

Answer 9

Short answer to your question is - NO, react doesn't have sync method setState.