Presentation about optimizing rendering performance with react-redux
- react-redux API
- react-redux bad practices
- react-redux good practices
- memoization, getters & selectors
npm run start -> localhost:9000
The app contains two paths with two differently rendered lists.
To change the list, go to components/App.js
and
1st list: import ItemsList from '../containers/items';
2nd list: import ItemsList from '../containers/items-list';
First list:
- Rendered with one container connected to the store
- Gets items details in props
Second list:
- Rendered with two containers connected to the store
- First containers connects only a list of items ids
- Second container renders one item, taking it's data by the id from the store
A huge list is connected to be able to see the rendering optimization difference.
One container list:
- Container recalculates mapStateToProps
- Container rerenders the connected component as the props changes
- React reconcilation triggers for every component in the list, checking if the components needs to be updated (in this case, an expensive operation)
- One of the components is updated
Two containers list:
- List container recalculates mapStateToProps
- List does not change as ids did not change. React list component is not rerendered
- Each item container recalculates mapStateToProps with shallow equal
- One of the container rerenders because props changes, only one react component rerenders
One container list:
Two containers list:
- Dive in to reconsilation, maybe instead of live examples with per instance memoization