Best way to use Redux and local state in react native to optimize performance?

I am using redux to manage a global state and sagas for async server calls in a react native app.

Can it improve the performance / minimize rendering to split the calls to redux state when connecting a component to the redux store? E.g. a big object in the redux store is composed of many smaller ones. {bigObject : {small1, small2, small3….}} in mapStateToProps for a class, is it more efficient to make separate calls to each of the smaller objects that are required (small1: state.bigObject.small1), or is it better to have only one call to the larger object ( big: state.bigObject)?

Similarly, can it be good practice to create local state copies of the redux state (e.g. setState for class) or is it better to call the redux state directly in the component (e.g. this.props.state.bigObject.small1) anywhere it is needed? Does it have an impact?

Thanks a lot!

Answer

No. Once your state is in memory, it’s in memory. Redux is just a fancy object, and object access is in O(1) time. All you would be doing is taking up additional memory and and processing time by duplicating your state. Not to mention the likelihood of bugs from local and global state getting out of sync.

Redux and React are already optimized to solve this problem. Here’s a section of the React docs that covers this.