1

( sorry for poor wording on the title... couldn't find a good way to word it. )

I have a method that does a put request and then updates the state.

In the example below, key_in_state are dictionaries with unique ids as the key. It checks if the dictionary contains the old response data. If it does, update that specific one.

method_name = () => {
  let key_in_state_1 = { ...this.state.key_in_state_1 }
  let key_in_state_2 = { ...this.state.key_in_state_2 }

  axios.put( someurl )
    .then( res => {
      if ( key_in_state_1[ res.data._id ] ) {
        key_in_state_1[ res.data._id ] = res.data
      }
      if ( key_in_state_2[ res.data._id ] ) {
        key_in_state_2[ res.data._id ] = res.data
      }

      this.setState( {
        key_in_state_1,
        key_in_state_2
      } )

    } )
}

Would it be more efficient to call this.setState a single time as shown in the example above or would it be better to call this.setState within each if statement so we wouldn't need to rewrite the state if there is no new data?

method_name = () => {
  let key_in_state_1 = { ...this.state.key_in_state_1 }
  let key_in_state_2 = { ...this.state.key_in_state_2 }

  axios.put( someurl )
    .then( res => {
      if ( key_in_state_1[ res.data._id ] ) {
        key_in_state_1[ res.data._id ] = res.data
        this.setState( { key_in_state_1 } )
      }
      if ( key_in_state_2[ res.data._id ] ) {
        key_in_state_2[ res.data._id ] = res.data
        this.setState( { key_in_state_2 } )
      }

    } )
}

Sometimes the response isn't within the the dictionaries so we wouldnt even need to update it.

Thank you!

Syn
  • 938
  • 1
  • 10
  • 21
  • question is not the same, but I believe the answer answers your question: https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates/48610973#48610973 – fangzhzh Jun 07 '19 at 03:55
  • Hmm... the guy said that the setStates are only batched in react event handlers so that tells me that my setStates wont be batched together since it isn't an event handler. Doesn't really answer my question I think... – Syn Jun 07 '19 at 03:59
  • This Github comment also pointed out your component will re-render everytime an axios call receives response: https://github.com/facebook/react/issues/10231#issuecomment-316644950. Seems like batch is not supported for XHR request yet in React v16. – blaz Jun 07 '19 at 03:59
  • 1
    @Syn: If I understand correctly your question, you trying to avoid calling `setState` when you think it's unnecessarily right? Thing is you can call `setState` a thousand times and if the state value doesnt change, it wont re-render so call as many times as you want but it will only re-render when state actually change – Isaac Jun 07 '19 at 04:02
  • @Isaac Oohh interesting. Didn't know that! So if I clone an object by doing: `let obj = { ...this.state.obj}`, and follow that up with a `this.setState({ obj })`, it wouldn't re-render anything because its the same? – Syn Jun 07 '19 at 04:06
  • It will in your case because `obj` is state that has an object, and object is always having new reference despite their value is the same. So if you wish to improve performance, implement `shouldcomponentupdate` and do the object comparison there and decide if it should rerender – Isaac Jun 07 '19 at 04:12

0 Answers0