Improve React App Performance Step by Step

JavaScript is fast, but sometimes could be very slow. As a react developer, you should be aware of how to code your app in a good way, and avoid unnecessary re-rending. I’ll list some points here to do your performance improvement step by step.

How to

ShouldComponentUpdate

The react documentation explain how to avoid useless rerenders.

Recompose:

  • pure()

Prevents the component from updating unless a prop has changed. Uses shallowEqual() to test for changes.

  • shouldUpdate()

Higher-order component version of shouldComponentUpdate(). The test function accepts both the current props and the next props.

  • onlyUpdateForKeys()
  • onlyUpdateForPropTypes()

Redux

State management. Immutable.js for reducers (optional).

Reselect

Reselect is a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store.

More

Profiling Components with Chrome Timeline – From Facebook (1 min to read)

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *