Is there a synchronous alternative of setState() in Reactjs

by

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>

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. Understanding unique keys for array children in React.js
  3. What do these three dots in React do?
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. Problem in redirecting programmatically to a route in react router v6
  7. What happens when using this.setState multiple times in React component?
  8. React – changing an uncontrolled input
  9. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  10. Arrow functions and the use of parentheses () or {} or ({})
  11. ReactJS – Pass props with Redirect component
  12. React: how to load and render external html file?
  13. What does calling super() in a React constructor do?
  14. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  15. Use if statement in React JSX
  16. Using Matter.js to render to the DOM or React
  17. Rendering an array.map() in React
  18. Does new React Context API trigger re-renders?
  19. Playing sound in React.js
  20. Should we use useCallback in every function handler in React Functional Components
  21. React: Axios Network Error
  22. map function not working in React
  23. Why I receive blank page? React
  24. Detect scroll direction in React js
  25. React cannot read property map of undefined
  26. How to properly use useHistory () from react-router-dom?
  27. React Error: “SharedArrayBuffer is not defined” in Firefox
  28. Object is not extensible error when creating new attribute for array of objects
  29. How to set iframe content of a react component
  30. How should I alternate componentWillMount()?

Leave a Comment