setState doesn’t update the state immediately

by

Your state needs some time to mutate, and since console.log(this.state.boardAddModalShow) executes before the state mutates, you get the previous value as output. So you need to write the console in the callback to the setState function

openAddBoardModal() {
  this.setState({ boardAddModalShow: true }, function () {
    console.log(this.state.boardAddModalShow);
  });
}

setState is asynchronous. It means you can’t call it on one line and assume the state has changed on the next.

According to React 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.

Why would they make setState async

This is because setState alters the state and causes rerendering. This
can be an expensive operation and making it synchronous might leave
the browser unresponsive.

Thus the setState calls are asynchronous as well as batched for better
UI experience and performance.

More Related Contents:

  1. How to update nested state properties in React
  2. Unable to access React instance (this) inside event handler [duplicate]
  3. How to scroll to an element?
  4. Why shouldn’t JSX props use arrow functions or bind?
  5. Concatenating variables and strings in React
  6. How to add multiple classes to a ReactJS Component?
  7. What is the difference between using constructor vs state = {} to declare state in react component?
  8. React useState hook event handler using initial state
  9. Can I use arrow function in constructor of a react component?
  10. ES6 array map doesn’t return anything: ReactJS
  11. setState() inside of componentDidUpdate()
  12. Arrow functions and the use of parentheses () or {} or ({})
  13. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  14. Why React Hook useState uses const and not let
  15. where is create-react-app webpack config and files?
  16. What does calling super() in a React constructor do?
  17. Unable to use Arrow functions inside React component class [duplicate]
  18. Best way to polyfill ES6 features in React app that uses create-react-app
  19. Importing multiple files in react
  20. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  21. React.createClass vs. ES6 arrow function
  22. How do you import a javascript package from a cdn/script tag in React?
  23. React.js ES6 avoid binding ‘this’ to every method
  24. Error: How to serialize data from getStaticProps : Next.js
  25. What do curly braces mean in JSX (React)?
  26. map function not working in React
  27. React functional component default props vs default parameters
  28. React cannot read property map of undefined
  29. Deep nested array of objects not rendering
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment