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

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

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

Remember,

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

Emilie Shin's photo

very useful tips! I keep forgetting using useMemo hook in functional components! Thank you!

Sandeep Panda's photo

Nice tips. Enjoyed reading. Thanks for sharing. :)

Nick Bull's photo

Thanks, Sandeep!

Hashnode is 🔥 (fresh breath after Medium)

Edidiong Asikpo's photo

Really amazing tips Nick Bull. Thanks for sharing.

Safwan Shaheer's photo

Thank you for the article, but afaik its a bad practice to use useCallback if the deps array is empty, plus the function is created at every render, there is no way to get though that unless you create a function outside of the component and use it inside passing necessary parameters.

Nick Bull's photo

"its a bad practice to use useCallback"

Why?

Safwan Shaheer's photo

Nick Bull Extremely sorry for the late reply, its a bad practice to use useCallback if the deps array is empty, which is what you are showing in the example above.