When value is assigned to components state, why console.log prints the previous state?

by

From 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.

If you want to print the change after a call to setState, use the optional callback parameter:

this.setState({
    number: num
}, function () {
    console.log(this.state.number);
});

More Related Contents:

  1. What is component in reactjs?
  2. React setState not updating state
  3. Trying to use fetch and pass in mode: no-cors
  4. Rerender view on browser resize with React
  5. React Context vs React Redux, when should I use each one? [closed]
  6. How to handle the `onKeyPress` event in ReactJS?
  7. Why is useState not triggering re-render?
  8. Is there a way to check if the react component is unmounted?
  9. react-router getting this.props.location in child components
  10. React Function Components with hooks vs Class Components
  11. How do I use external script that I add to react JS?
  12. Can I execute a function after setState is finished updating?
  13. where is create-react-app webpack config and files?
  14. React form onChange->setState one step behind
  15. init state without constructor in react
  16. Event timeline with animation
  17. onEnter not called in React-Router
  18. What do curly braces mean in JSX (React)?
  19. How to print React component on click of a button?
  20. How to render Streamable image on React coming from FastAPI server?
  21. react-router-dom v6 Routes showing blank page
  22. react-router (v4) how to go back?
  23. how to set up an inline svg with webpack
  24. How can I dispatch function in redux?
  25. Trying to use React.DOM to set body styles
  26. Dynamically Rendering a React component
  27. How to have nested loops with map in JSX?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. How to programmatically fill input elements built with React?

Leave a Comment