Lessons learned while working on a large scale react app

I have been using react from past18 months. It has worked great so far, except when I had a chance of working on a large scale app with hundreds of components. Everything was smooth until there were some reports of sluggishness in the application. It was because of poor understanding of the internals.

React is smart enough to avoid dom updates, but if you do not design your app state and component tree carefully, there could be multiple updates happening across the component tree, which may make the whole app perform sluggishly, specially on browsers like IE and Edge.

After some research I learned the following lessons -

1.The redux state should mirror the component tree as closely as possible.

We have seen this in every react tutorial and it is a good advice.

For example, if your app state is a deeply nested object and the component tree does not mirror that, you will end up creating some kind of mapper to map the redux state to component props.

If you are not careful, you may end up creating new object references to be passed as props to some component deep down the tree. This prop will have to be passed through from the top level parent to the component deep inside the tree. Because, there is a new object being passed along on each redux store update, all the components in the path will see a updated prop being passed along and will end up updating. This may cause the component tree to update on every dispatch.

2. Avoid creating new objects in mapStateToProps.

This is a corollary of #1.

If you have a mapStateToProps at a container component and you are creating new objects by subscribing to store updates, this in turn will update the component tree every time. Also avoid passing lambdas to components which creates a new object reference on every update and all child components which receive them as props will end up updating.

3.Consider creating fewer action creators.

This is a trade-off. If your reducer function can update multiple parts of the redux state in a single dispatch, it may decrease number of state updates and consequently component updates. There are some libraries created to help with similar problems. For example —

https://github.com/lelandrichardson/redux-pack

redux-pack helps you group together app updates which probably should have been a single dispatch but when using with a middleware like thunk we end up dispatching several actions sequentially on completion of some async operation.

4.Try not to mount the components which are hidden on the UI.

If you have a lot of components mounted at the same time a single dispatch may end up updating many of them, this could be a bigger problem if you also have any of the above mentioned issues in your app.

5. Server side rendering

Consider using ReactDom.Hydrate instead of render. This makes the first-load experience more performant but do not try to update the state of application, which updates a component, in lifecycle hooks like ComponentWillMount, they may be ignored when hydrating the application.