CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
vsync
vsync

Reputation: 130175

shouldComponentUpdate not firing after a Redux dispach

I have a component with a situation like this:

  1. Fetch data from the server and update the page's reducer with status of pending, success or fail via a dispatch.

  2. mapStateToProps does include the page status from the page's reducer, which can be verified since the status key is present in this.props.

  3. I expect shouldComponentUpdate to fire once I get a fail status dispatched, but it does not get invoked, and my app is simply stuck in a "between" state, and cannot trigger a render because it depends on shouldComponentUpdate to fire and tell it to render if the status is anything except pending.

I've noticed that shouldComponentUpdate gets sometimes fired after a few dispatches, like it's waiting for them to accumulate or something, not sure..

Does anybody know why shouldComponentUpdate isn't automatically triggered after my final dispatch when the fail status was dispatched?

Upvotes: 1

Views: 762

Answers (1)

vsync
vsync

Reputation: 130175

I found out what was the problem; inside shouldComponentUpdate I wrote:

return this.props.status != 'pending';

Since I thought that the lifecycle after Redux made a change to the state would reflect in this.props but what I really should have been doing is using nextProps.status, because nextProps is exposed as shouldComponentUpdate argument:

shouldComponentUpdate( nextProps, nextState ){
   return nextProps.status.status != 'pending';
}

The idea behind all this is to not trigger a ton of render calls since my store has many dispatches from data fetches in the background until all data needed is received, and each dispatch updated the props therefor the render method was called many times, and I did (still do) not trust React to not actually re-render the DOM if no changes were actually made should reflect in the DOM change, but nevertheless, render was fired.

I am a bit new to react, and I do not understand why does render get fired when the state changed but the render's JSX doesn't care about those specific changes..

Upvotes: 1

Related Questions