Task #1901
closed
React components are rendering too many times
Added by Vít Švanda over 4 years ago.
Updated over 4 years ago.
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.
- % 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/
- Status changed from In Progress to Needs feedback
- Assignee changed from Vít Švanda to Radek Tomiška
- % Done changed from 60 to 90
- 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.
- Status changed from Resolved to Closed
Also available in: Atom
PDF
