React component not re-rendering on state change

Question

I have a React Class that s going to an API to get content  I ve confirmed the data is coming back  but it s not re-rendering     var DealsList   React createClass      getInitialState  function          return   deals                 componentDidMount  function          this loadDealsFromServer             loadDealsFromServer  function          var newDeals              chrome runtime sendMessage   action   findDeals   personId  this props person id    function deals           newDeals   deals                  this setState   deals  newDeals              render  function          var dealNodes   this state deals map function deal  index           return             lt Deal deal  deal  key  index    gt                          return           lt div className  deals  gt            lt table gt              lt thead gt                lt tr gt                  lt td gt Name lt  td gt                  lt td gt Amount lt  td gt                  lt td gt Stage lt  td gt                  lt td gt Probability lt  td gt                  lt td gt Status lt  td gt                  lt td gt Exp  Close lt  td gt                lt  tr gt              lt  thead gt              lt tbody gt                dealNodes              lt  tbody gt            lt  table gt          lt  div gt                         However  if I add a debugger like below  newDeals are populated  and then once I continue  i see the data       loadDealsFromServer  function          var newDeals              chrome runtime sendMessage   action   findDeals   personId  this props person id    function deals           newDeals   deals                debugger      this setState   deals  newDeals                This is what s calling deals list     var Gmail   React createClass      render  function          return           lt div className  main  gt            lt div className  panel  gt              lt DealsList person  this props person    gt            lt  div gt          lt  div gt

User · Answer

In my case  I was calling this setState     correctly  but I my function wasn t bound to this  so it wasn t working  Adding  bind this  to the function call or doing this foo   this foo bind this  in the constructor fixed it

User · Answer

My issue was that I was using  React PureComponent  when I should have been using  React Component

User · Answer

Another oh-so-easy mistake  which was the source of the problem for me  I   d written my own shouldComponentUpdate method  which didn   t check the new state change I   d added

User · Answer

That s because the response from chrome runtime sendMessage is asynchronous  here s the order of operations   var newDeals            1  first chrome runtime sendMessage is called  and  registers a callback     so that when the data comes back  in the future     the function will be called chrome runtime sendMessage        function deals          3  sometime in the future  this function runs       but it s too late   newDeals   deals           2  this is called immediately   newDeals  is an empty array this setState   deals  newDeals       When you pause the script with the debugger  you re giving the extension time to call the callback  by the time you continue  the data has arrived and it appears to work   To fix  you want to do the setState call after the data comes back from the Chrome extension   var newDeals            1  first chrome runtime sendMessage is called  and  registers a callback     so that when the data comes back  in the future     the function will be called chrome runtime sendMessage        function deals          2  sometime in the future  this function runs   newDeals   deals         3  now you can call  setState  with the data   this setState   deals  newDeals       bind this       Don t forget to bind this   or use an arrow function     Edit   If this doesn t work for you  check out the other answers on this question  which explain other reasons your component might not be updating

User · Answer

I d like to add to this the enormously simple  but oh so easily made mistake of writing   this state something    changed         and then not understanding why it s not rendering and Googling and coming on this page  only to realize that you should have written   this setState  something   changed       React only triggers a re-render if you use setState to update the state

User · Answer

I was going through same issue in React-Native where API response  amp  reject weren t updating states  apiCall   then function resp        this setState  data  resp      wasn t updating     I solved the problem by changing function with the arrow function  apiCall   then  resp    gt        this setState  data  resp      rendering the view as expected     For me  it was a binding issue  Using arrow functions solved it because arrow function doesn t create its s own this  its always bounded to its outer context where it comes from

User · Answer

After looking into many answers  most of them are correct for their scenarios  and none of them fix my problem I realized that my case is a bit different  In my weird scenario my component was being rendered inside the state and therefore couldn t be updated  Below is a simple example  constructor         this myMethod   this myMethod bind this       this changeTitle   this changeTitle bind this        this myMethod       changeTitle         this setState  title   I will never get updated          myMethod         this setState  body   lt div gt  this state title  lt  div gt        render         return  lt  gt           this state body           lt Button onclick       gt  this changeTitle    gt Change Title  lt  Button gt       lt   gt     After refactoring the code to not render the body from state it worked fine

[javascript] React component not re-rendering on state change

Examples related to javascript

Examples related to reactjs

Examples related to higher-order-components