DEV Community

Cover image for Tips for Faster React App
Isaque Igor
Isaque Igor

Posted on

13

Tips for Faster React App

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

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:

Normal import
You can do it like this:

Lazy Loading

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 */
});
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (3)

Collapse
 
okyanusoz profile image
okyanusoz

You can also use lodash-es instead of using lodash-webpack-plugin.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

It's lodash not lowdash

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay