Tips for Faster React App

#performance #react

This is a list of tips and techniques you can implement in your React Application for better performance.

Virtualization or Windowing

You might occasionally need to show a sizable table or list with many rows. Rendering a large set of data will impact application's performance if we load every single item all at once. This could freeze or crash the browser especially in less powerful devices with more complex layouts.

In that case, Virtualization, or "windowing" will be a great solution. It's a technique to render only the items that are visible to the user.

The good news is that you do not have to implement this solution yourself you may use these popular windowing libraries like react window and react virtualized to your advantage.

Lazy Loading Components

Lazy loading is a great technique for optimizing and speeding up the render time of your application.
The idea of lazy loading is to load a component only when it's needed.

React comes bundled with the React.lazy API so that you can render a dynamic import as a regular component. So instead
of loading your regular component like this:

You can do it like this:

Dependency Optimization

One often overlooked aspect of software development is how much programmers rely on open source libraries and packages
for ready-to-use code.
Sometimes it is a little too much instead of writing code from scratch or even copying and pasting code from one program to another, some programmers still rely on what is called a dependency.
For example, the lodash library. Let's say we only need three of the 100 methods from the library. Having all extra methods in the final bundle is not optimal.
We may use lodash-webpack-plugin to remove unused function and customize a build for us, this will produce a smaller build of the library.
It's worth checking how much code you are actually utilizing from dependencies when optimizing the application bundle size also it is a good idea to monitor and remove dependencies that are no longer used.

Sometimes the best dependencies is no dependencies at all

Avoid Unnecessary Component Renders

unnecessary re-rendering react component is a common problem in react. When a component re-renders react will also re-render its child component by default. This will slow the app and make the user frustrated, and no one wants to use an app that is laggy and feel unresponsive.
To prevent this from happening functional components can use React.memo to ensure the component is only re-rendered when its props change.
class-based components can utilize React PureComponent to get the same effect.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

Keep state local instead of store

It is easy to get carried away and dumping most of the state of your application to state management libraries.
Keeping the state of the component locally is preferable and will always be faster than using a global store.

This may not hurt a desktop computer much, but a small mobile device will take an obvious performance hit.

So, before storing a state to the store always check if it can be avoided.

React fragments

React requires a surrounding container for every component. But after the React 16, it is no longer needed because of React Fragments.
Fragments avoid creating an extra unnecessary DOM Node which is good for memory. Every little nodes that we can save adds up easily making our React application cleaner and speedy.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

Conclusion

I sincerely hope that providing you with this tips on React speed optimization served the objective of this post. You can accomplish amazing feats in terms of the speed of the React app if these tips are correctly put into practice.