React is one of the most used Javascript libraries (or frameworks, or however you want to describe it) out there. But let's be honest; the more complex the project becomes, the more critical it is to optimize its performance.
In today's article, I will talk about 10 little tips I have been using these years to improve the performance of my React applications. Hopefully, you will find some new tricks here!
1️⃣ Use the Production Build
This is pretty obvious, but you will be amazed at the number of projects where I had worked as a freelancer that when I joined, I found t*hey were using the dev build in production*.
When developing your application, you should always use the production build to ensure its best performance. Production builds perform many optimizations like modification and removing dead code (plus some dependencies behave differently depending on which kind of build is calling them).
To use a production build, if you are using CRA or Vite, you can run the npm run build or yarn build command or you can set the NODE_ENV environment variable to production when starting the development server.
2️⃣ Use a Dynamic Import
Dynamic imports are impressive (at least for me) since they allow you to load modules only when needed instead of loading them when the application starts.
As you will think, that significantly improves the initial load time of the application.
Lost of people would use the typical React method with the await import('') method, but I recommend you use a module called loadable-components.
I prefer this module because it dynamically loads modules, but it also code-splits them, and... it loads the modules only when used to render something! So even better.
You would use it like this:
3️⃣ Use Functional Components
Well, this is more of an opinion, but functional components are the current standard for React. Yes, you could still use class components, but you won't be able to use hooks as intended. And let's be honest, that is a core function for the latest React versions!
Plus, functional components don't have the overhead class components, and you can easily implement features like memorization, which can further improve performance.
An example of a functional component would be:
4️⃣ Use Memoization
Memoizing a component is a fantastic way to improve the performance since you will prevent re-renders if the props haven't changed (plus, you can also avoid network requests if it happens you are performing some inside).
As you may know, in React, you use the useMemo and useCallback hooks for this behavior.
For example, if you want to cache a variable only to be updated when some state changes, you could use the following code:
5️⃣ Use a Performance Profiler
No optimization guide could be completed without this advice. All these little tips are helpful (and there are many more you could use), but the key is to determine where the performance loss is happening in your application.
And that is the objective of a performance profiler: to identify bottlenecks in your code.
Luckily, you could use one like the one included in the React Developer Tools extension.
This article has been short, but that was the objective. I want to give you some essential insights into improvements I like to make, but I will start writing a series of articles around React optimization, where we will go in-depth on each technique. So if you are interested in learning more about that, don't forget to follow me!
With that being said, if you wish to connect with me...
🌎 Let's Connect!
- My Twitter: @thenaubit
- My Substack (here I will publish more in-depth articles)
Top comments (0)