Tips for Faster React App
Tags: performance, react
Published: 2022-08-18 18:48:00

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.


![Virtualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2xw7fot9exea8998bqj.png)

The good news is that you do not have to implement this solution yourself you may use these popular windowing libraries like **[react window](https://github.com/bvaughn/react-window)** and **[react virtualized](https://github.com/bvaughn/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:

![Normal import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw7f0tco0kmg36lllpd9.png)
 You can do it like this:

![Lazy Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5uc3djl1h18fmaeb0bt.png)


## 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.

```JSX
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.

```JSX
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.