Finding performance bottlenecks
- Profiling Components using Chrome Browser Extension
- Memory Snapshots from Firefox
- Using the package why-did-you-render
So how did we improve performance?
- Remove all Inline Functions
- Avoid modifying the state if there is no change in state from your Redux store
- Conditional rendering of the components
- Remove unnecessary awaits and use Promise.all() wherever applicable
To improve the performance of your React app, Avoid inline functions as much as possible. If your application is small, it will not affect you much but once you develop more and more features, this will bite you for sure. Remember that Immutability is the key to avoid unnecessary re-renders. Always render hidden components like Modals and Dropdowns conditionally. These components are not visible until triggered, but are affecting your application’s overall performance. Always call multiple APIs parallelly. Sequential calls affect load time.