I do not understand the difference between these assignments in React:

this.state.x = 4; 

 this.setState({ x: 4 })

I also do not understand why, when I assign a value in the first way, then if I start the alert right after assignment, I will see the value that I have just assigned. If I assigned the value in the second way, the alert will display the previous value of this variable. Because of this there was a problem with the program. I assigned it in the second way, I thought that in the same function there would already be a new value, but it turned out - no

2 answers 2

The first way is to barbarously change the state directly without using the internal mechanisms for optimizing the reactor. Documentation in large letters says that it is not necessary to do this and it is worthwhile to consider the state immountable.

The second way is the right one and you should do it this way. Another thing is that the reactor does not change the state immediately, but when it considers it necessary according to the logic of the application. If this conflicts with the logic of your application, then you have already done something wrong there, not agreeing with the principles laid down in the reactor.

If you need to do something when the state has already changed, then setState takes the second parameter kolbek.

    Briefly, the point is that state should be set only via setState() - since this will trigger some events, and is also an asynchronous operation.

    More details source - documentation React components (in English.)

    Notes: NEVER mutate this.state directly, as calling setState () afterwards. Treat this.state as if it were immutable.

    setState () doesn’t immediately mutate this.state but creates a pending state transition. Accessing this.state after this value.

    There is no guarantee that it will be batched for performance gains.

    setState () will always be triggered unless it’s conditionComponentUpdate (). It couldn’t be necessary to implement it.

    Translation ( from here ):

    Notes: NEVER change this.state directly, by calling setState () which afterwards can replace the changes you made. Treat this.state as if it were unchanged.

    setState () does not immediately change this.state, but creates a pending state transition. Access this.state after calling this method can potentially return an existing value.

    There is no guarantee that the synchronous operation of the setState call operations, calls can be grouped in order to improve performance.

    setState () will always re-render until the conditional rendering logic is implemented in shouldComponentUpdate (). If mutable objects are used and the logic cannot be implemented in shouldComponentUpdate (), setState () is called only when the new state is different from the previous state to avoid unnecessary re-rendering.

    • one
      in Russian tftf.ru/stati/javascript/reactjs/reference/komponent_api - Jean-Claude
    • Maybe you should still formulate the answer in Russian? Quotes in English is not enough - Dmitriy Simushev
    • one
      updated answer. When I wrote, I was distracted and did not have time to give a translation:) - Sergiks