Task #1901
closed
React components are rendering too many times
100%
Description
I have table with assigned role, when I show detail of one IdentityRole (in modal dialog), then animation of modal dialog is jerking.
Problem is that the our React components are rendering too many times. For example the one selectbox is rendering 7 times.
This is not issue only in version 10 (affected are all versions), but this is good time for solve this.
Updated by Vít Švanda over 4 years ago
- % Done changed from 0 to 60
Reason: Redux and immutable objects.
The redux invoke render if some of selected properties were changed. Problem is that the redux use "===" for detection of changes. It means this does not work for immutable object. For example every array use in select method will invoke rendering on any change of redux state. For prevent it we need to use memoizing (yea, nice new buzzword ... and means cache :-) ) and return same instance of property when object was not changed.
Because Reselect version not working for me. I use more naive solution for now. I impelmented cache (only for entities in table), it is same idea as use Reselect.
Now is one selectbox render twice (instead seven times). Jerking is gone.
Commit: https://github.com/bcvsolutions/CzechIdMng/commit/118fc97d4e4973eb5ff4af1bcffc20e56f6c3820
Nice article: https://daveceddia.com/redux-selectors/
Updated by Vít Švanda over 4 years ago
- Status changed from In Progress to Needs feedback
- Assignee changed from Vít Švanda to Radek Tomiška
- % Done changed from 60 to 90
Updated by Vít Švanda over 4 years ago
All our components use React.PureComponent now. This pattern reduces number of rendering.
I found only on big problem (for now) in our Tabs. Only first tab was rendered, no others. I fixed it. I had to turn off animation and modified Basic.Tabs component for using activeKey (needed in cases where onSelect method is not implemented).
Commit: https://github.com/bcvsolutions/CzechIdMng/commit/65b8ad926c0f75300ff3f838ad2ca56f21d97d5f
Updated by Radek Tomiška over 4 years ago
- Status changed from Needs feedback to Resolved
- Assignee changed from Radek Tomiška to Vít Švanda
- % Done changed from 90 to 100
I did test and review, it works and code looks nice.
Note: is needed to pay attention to state usage - e.g. when array is used in state, then new instance (clone) has to be created, when state changes.