Question: react native - redux state cause performance issues

Question

react native - redux state cause performance issues

Answers 1
Added at 2016-12-27 12:12
Tags
Question

I am new in both React native and redux. While I am working with React native and redux, I realize that state in redux store cause the component render a lot.

For example, I have data of a list view which is stored as a redux state. The list view will be shown in screen A. For some reasons, I will modify the list view in next screen. By storing the data in redux state, the list view in screen A will auto update whenever there is a change of the list view in the next screen.

Unfortunately, I have to re-render every components in screen A whenever the data in list view is changed (If I put the data in component state, only the list view will be re-rendered instead of all components).

Can I store the data of list view in redux state and just re-render it (not all components)?

If you have any suggestion, please let me know.

Thank you in advance!

Answers
nr: #1 dodano: 2016-12-27 18:12

Well, if you have connected the state to properties with mapStateToProps, then whenever you change the data in the reducer, these props are changed too and this causes re-calling the render() method, so basicly re-render.

Every connected props from the state are causing re-render of the components, if they are changed in the reducers store.

In your case, the problem should be somewhere else, maybe in the navigator, that leaves the component A after navigating from A to B still mounted in the background?

To answer your question, you can store your data of ListView (some json list) in redux, and than connect it with your component, but try to make another component inside the Component A, like Component A_2 and connect this with mapStateToProps. Then if you change the data, only the Component A_2 will be re-rendered, not the whole Component A.

Source Show
◀ Wstecz