DanielJyc DanielJyc - 3 months ago 27
React JSX Question

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

I want to change the

hasSubmit
immediately like the first code. I know this is not recommend. But the second code is asynchronous and I don't want to use the callback function of
setstate
.


  • What is the difference of
    this.state
    and
    setstate
    ?

  • Is there any way to change state value
    hasSubmit
    immediately?




First Code:

this.state.hasSubmit = false
this.setState({})
//Code that will use `hasSubmit`.


Second code:

this.setState({
hasSubmit: false,
});
//Code that will use `hasSubmit`.






ADD:

The scenario is that:



  1. hasSubmit
    setted
    false
    in
    getInitialState()
    .

  2. hasSubmit
    will change to
    false
    when I click
    submit
    button.

  3. hasSubmit
    will change to
    true
    when submitted.




First click
submit
has no problem and
hasSubmit
will be set
true
. But second click
submit
will be wrong using the
Second asynchronous code
, because the
hasSubmit
is still
true
.

And the
First Code
can resole the problem.

Answer

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