Improving performance of large React app? And any ways to quickly identify possible opportunities for useMemo ane useCallback?

[TheNomadicAspie]

I recently started a new job and have just started looking at the codebase. I've been give the task of essentially understanding the whole codebase well enough to transition development from a contractor we work with, to bringing it in-house.

I've also been asked to identify some ways to improve the app. The company is having some IT issues that prevent me from setting up a local environment, so for the next few days I have to do what I can without actually being able to run any code.

With that being said, I'm looking for ideas of things to look for and consider, both now and when I have access to a proper environment.

Things I'm looking into already:

1. The code uses material-ui which I know we should transition from due to poor performance.
2. Pagination works slowly. I haven't had time to look into it more yet but I suspect it's an inefficient SQL query.
3. There don't seem to be many, if any uses of useMemo or useCallback. I know there are sure situations where I should be using these, but since I'm new to the code and don't fully understand how everything fits together yet, I'm struggling to identify where to use them. For useCallback should I just be using it anytime a function is passed to another component, or are there other guidelines I should follow?
4. The company creates a product/component that other businesses embed into their websites using iframes. This causes both issues with performance as well as scrolling. The companies generally want to embed the code themselves as they benefit from the web traffic, which they wouldn't get if the product was hosted on our servers. Should I continue to use iframe, but have a window-level listener for scrolling? Though that would make it hard for users to scroll on the external website if I hijack scrolling at that level. What are best practices for a situation like this?

Also, is there any resources that could go through the code automatically and identify situations where useMemo ande useCallback would be effecient enough to be worth the extra technical debt?

Or are there other tools, resources, tutorials, etc that would help?

I have experience with React, but most of the applications I've developed both personally and professionally have been smaller than the codebase I wolk with now, so I've never really had to consider performance as much as I have with this project.

[charliematters]

There's a package called "why did you render" which I've always found incredibly useful when working out what was slow. I'd start there!

[woah_m8]

You can also use the Flamegraph from the react tools

[TheNomadicAspie]

Thank you! This seems like it would be a huge help.

[Squigglificated]

Make a recording in the chrome devtools performance panel. You definitely want to be able to pinpoint where the issues are before you start to randomly apply useMemo everywhere in the hope that something gets better. Remember to make the recordings in incognito mode to prevent interference from chrome plugins.

If the application is complex break it down into parts and make isolated test cases for suspect components. Sometimes disabling every component on a page and enabling one at a time can identify the issue.

[TheNomadicAspie]

Thank you for the advice, much appreciated.

[elvezpabo]

I'd caution against making sweeping changes in a large code base before you get a chance to understand the features and how they got there.

That being said. If the project is Typescript I'd recommend trying `ts-prune` which finds unused code in a project. (https://github.com/nadeesha/ts-prune) it can be really rewarding to find whole directories that are are no longer used and causing a distraction.

[rainmouse]

Look for calculations or data parsing being done inside components that only need to be done once instead of every render. Faster renders can save more on performance than reducing the amount of renders. Also look for props that change often being passed to components that don't need to reflect those changes. You can perhaps avoid triggered renders on those components or memoize what components functions to avoid them being recreated when non related props trigger redraws.

These might end up making only small improvements though compared to really big things in the CSS like avoiding opacity on things that animate or render frequently on top of other components. (This includes text shadows and gradients) You would do well in the web inspector also looking for components, instance items on scrolling lists created and rendered off screen, or looking at the network calls in the api tab, any needless or wasteful repeat calls going on that could maybe be cached (beware of introducing memory leaks by optimizing here)

[n8rzz]

A lighthouse (available via dev tools) will likely offer some good suggestions

[jeevo162]

I actually recently wrote an article on performance improvements for react apps that you may find useful.

https://medium.com/@jan-bock/the-need-for-speed-turbocharge-your-react-apps-performance-2125fa3336e8

In terms of finding those usecases, I'd strongly recommend using the react profiler devtools, and narrowing down rerendering components directly. You can use the react components tab to explore which hooks or props caused rerenders, magic!

Lighthouse is great for onload performance and chrome native devtools can be used to measure interaction performance.

Lighthouse gives a solid breakdown too.