react-redux performance re-render components

Question

I'm having performance issues with my react-native application, I've encountered the problem but I do not know what the best way to solve it, I'll describe below my scenario:

I have a navigation for 3 scenes:

Scene 1 ==> Scene 2 ==> Scene 3

Scene 2 has an extensive list of items, in Scene 3 I can add or remove items from the Store (I am using the Flux architecture), when this occurs the state of the application is changed and the assembled components are re-rendered, which is The case of Scene 1, Scene 2 and Scene 3, the problem is that the rendering of Scenes 1 and 2 are heavy which causes a very great delay in the acting of Scene 3, after much research I discovered that I can use the method ShouldComponentUpdate to handle re-rendering, my question is how do I render only the change that has occurred in my list and not the entire list again, as this implies traversing every array again.

SteveKitakis · Answer 1 · 2017-06-23T02:56:39.690

1

I'm a bit confused. Are you using Flux or Redux? If you are using react-redux, you can use mapStateToProps to bind your components to part of your Redux store. The components should then only re-render when those props change.

Edit: You may also consider making a new React component for the list items. Each item would then only re-render when their individual props change.

Redux Usage with React

edited Jun 23 '17 at 02:56

answered Jun 23 '17 at 02:50

SteveKitakis

162
2

I'm using react-redux lib, and I do mapStateToProps but the performance not be a better, this problem just occorred when I add item in array , when I remove or edit item the performance is good. – 1fabiopereira Jun 23 '17 at 12:06
Could you post your Scene component jsx? – SteveKitakis Jun 23 '17 at 15:01

react-redux performance re-render components

1 Answers1