'React-Redux vs shouldComponentUpdate Rendering Optimization
The React-Redux project I am working on handles a group of participants currently organized in a JavaScript object like a map with key:value pair defined as participantId:participant.
I am receiving updates in terms of individual participants, so the program should have exact knowledge of what to re-render.
The components are currently setup such that the parent component is connected to the Redux state, and the participants object is converted into an array and passed down to its children's props.
Every time the update action passes through the reducer, it generates a new state, which fails mapStateToProp's shallow comparison checks and triggers a re-render of the parent component and child components.
Re-rendering the entire list of child components negates the purpose of receiving updates for one participant at a time. If possible, I would like to re-render only the specific child component that has updated and re-render the entire list only when a child is added/removed.
Can I do this with React-Redux? Especially when I'm storing the participants as a mutable data when Redux encourages me not to? Or should I be looking into using ShouldComponentUpdate and ditch Redux?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|