Nick Bull Blog

Nick Bull Blog

3 Most Effective Ways to Optimize Your React App Performance Right Now

3 Most Effective Ways to Optimize Your React App Performance Right Now

Featured on Hashnode

1. useMemo

useMemo is a React hook that returns the memoized value of some computation.

Image for post

Memoization is a method to save the results of function execution to prevent repeated calculations. This optimization is used to increase the speed of your application.

useMemo function executes in 2 cases:

  1. Initial render
  2. Array of dependencies has changed

Let’s look at an example of how you can apply it to your ReactJS application:

Image for post


This optimization helps to avoid expensive computations with every rendering.

Use it.

2. Debouncing your JavaScript events

One of the biggest mistakes I often see is NO debounce function.

Are you serious?

Debounce function is needed to ensure that a particular task is not run too often and not decreasing browser performance.

How does it work?

Debounce returns a function, that will not be triggered as long as it continues to be invoked. Returned function will be called after it stops being called for N milliseconds.

Let’s see how it works inside:

Image for post

And now let’s do the real-life optimization.

For example, you have an input that sent search value on every change to the server:

Image for post

Function sendSearchValueToServer fires on every input change. It’s a lot of API requests, let’s optimize it with debounce.

Image for post

Now you see how important debounce is?

3. Remove inline function definition in the render function

Common mistake.

And you may not even feel that the app is “getting slower”. But it’s a compound effect, the larger your app the slower it gets.

What’s the problem?

Arrow function will create a new instance of the function on each render. It’s a bad practice that hurts performance because the function is recreated on each render. This creates a lot of work for the garbage collector and rerendering many elements might create jank in animations.

How to fix it?

Let’s look at an example:

Image for post

In the end

Now you know 3 methods to optimize your React application. That’s all. Thanks for reading!

🔴 Every week, I send out my “3-2-1” newsletter with 3 tech news, 2 articles, 1 advice, and 1 Secret BONUS for you. Join my 3-2-1 Newsletter

Share this