What the difference of this.state and this.setstate in ReactJS?

by

Here’s what the React docs say:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

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.
setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().

If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

It’s always sensible to use APIs in the way they were designed. If the docs say don’t mutate your state, then you’d better not mutate your state.

Whilst setState() might be technically asynchronous, it’s certainly not slow in any noticeable way. The component’s render() function will be called in pretty short order.

One drawback of setting state directly is that React’s lifecycle methods – shouldComponentUpdate(), componentWillUpdate(), componentDidUpdate() – depend on state transitions being called with setState(). If you change the state directly and call setState() with an empty object, you can no longer implement those methods.

Another is that it’s just bad programming style. You’re doing in two statements what you could be doing in one.

Moreover, there’s no actual benefit here. In both cases, render() is not going to be triggered until after setState() (or forceUpdate()) is called.

You claim a need to do this without actually explaining what that need is. Perhaps you’d like to detail your problem a little more. There’s probably a better solution.

It’s best to work with the framework rather than against it.

UPDATE

From the comments below:

The need is that I want use the changed hasSubmit in below.

OK, I understand now. If you need to immediately use the future state property, your best bet is just to store it in a local variable.

const hasSubmit = false;

this.setState({
  hasSubmit: hasSubmit
});

if (hasSubmit) { 
  // Code that will use `hasSubmit` ...

More Related Contents:

  1. Why is setState in reactjs Async instead of Sync?
  2. Why do we need middleware for async flow in Redux?
  3. Reactjs async rendering of components
  4. How to async await in react render function?
  5. How to call an async function inside a UseEffect() in React?
  6. How do I access store state in React Redux?
  7. Use Async/Await with Axios in React.js
  8. React: “this” is undefined inside a component function
  9. State not updating when using React state hook within setInterval
  10. How to turn this callback into a promise using async/await?
  11. “this” is undefined inside map function Reactjs
  12. What are these three dots in React doing?
  13. How do I conditionally add attributes to React components?
  14. React component initialize state from props
  15. Can’t build React/Next project – found page without a React Component as default export (context api file)
  16. ES6 modules implementation, how to load a json file
  17. Async Google Maps API v3 undefined is not a function [closed]
  18. Difference between declarative and imperative in React.js?
  19. React useEffect causing: Can’t perform a React state update on an unmounted component
  20. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  21. React eslint error missing in props validation
  22. Node async loop – how to make this code run in sequential order?
  23. When value is assigned to components state, why console.log prints the previous state?
  24. Matched leaf route at location “/” does not have an element
  25. Simulate a button click in Jest
  26. When does async function actually return a pending promise?
  27. How to parse html to React component?
  28. How to get simple dispatch from this.props using connect w/ Redux?
  29. Object is not extensible error when creating new attribute for array of objects
  30. How should I alternate componentWillMount()?

Leave a Comment