Reactjs-setState previous state is the first argument, props as the second argument

by

They say you should do like that instead of the below example.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

They can’t assure the state will have the correct value if you access like this because setState() will happen asynchronously, other updates could occur and change the value. If you are going to calculate the state based on the previous state, you have to make sure you have the last and most up to date value, so they made setState() accept a function that is called with prevState and props, so you can have the correct value to update your state, like the example below.

 // Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

More Related Contents:

  1. How to update nested state properties in React
  2. React setState not updating state
  3. Can’t perform a React state update on an unmounted component
  4. Does React keep the order for state updates?
  5. Can I execute a function after setState is finished updating?
  6. Unable to access React instance (this) inside event handler [duplicate]
  7. Why do we need middleware for async flow in Redux?
  8. Push method in React Hooks (useState)?
  9. “this” is undefined inside map function Reactjs
  10. How do I conditionally add attributes to React components?
  11. React component initialize state from props
  12. How do I test axios in Jest?
  13. Why can’t I update props in react.js?
  14. Intercept/handle browser’s back button in React-router?
  15. react router doesn’t work in aws s3 bucket
  16. React Routing works in local machine but not Heroku
  17. Rendering React components with promises inside the render method
  18. When to use JSX.Element vs ReactNode vs ReactElement?
  19. React useState hook event handler using initial state
  20. Get path params in react-router v4
  21. In reactJS, how to copy text to clipboard?
  22. Unexpected token < error in react router component
  23. Unable to use Arrow functions inside React component class [duplicate]
  24. Where’s the connection between index.html and index.js in a Create-React-App application?
  25. how to listen for route change in react-router-dom v6
  26. How can I use Jest to spy on a method call?
  27. How does JavaScript mechanism behind react hooks work?
  28. React: Script tag not working when inserted using dangerouslySetInnerHTML
  29. Webpack breaking change
  30. Highlight text using ReactJS

Leave a Comment