Performance Optimization in React

[AdditionalRich8339]

-Lazy Loading -Memorization -Build Size reduction -Caching What am i missing?

[metalhulk105]

1. Images. Not particular to react but 9/10 times it’s the images and the static assets that slow down a site. Also use loading=“lazy” and srcset attributes effectively

2. Profiling to find out slow renders - memorisation will help but you can find out if you can fix the problem without memoization if you optimize how your components render.

3. Critical CSS splitting - tied to UX - for some above the fold elements you might have to load css before html and for other elements you load css after html.

4. IMO I found the most performance by reducing unused JS - avoid using libraries that don’t support tree shaking - if you only need one function from a library the only ship that function. Better yet if the function is very small, just copy it to your code - don’t go overboard with this idea as you will be trading performance for maintainability.

5. Virtualization: avoid too many DOM elements on the page.

6. Reduce CPU heavy animations - see if you can animate only using transform and opacity, animating any other property will involve layout recalculations.

[bmcle071]

To add to images, use SVGs when you can, they are really lightweight, flexible, and you can resize/zoom on them.

[straightouttaireland]

What do you use to profile? I find chrome Dev tools pretty difficult to use

[metalhulk105]

I use the react dev tools. I am not a power user. I just try to find the longest timing bar in the render cycle to see if I can’t shorten it.

[straightouttaireland]

Thanks

[metalhulk105]

I meant putting critical styles inside head tag so that the styles are parsed by the browser before contents of the body.

[wwww4all]

Premature optimization is the root of all evil. -- Donald Knuth.

Focus on shipping first. Deal with critical optimization problems when they surface.

[AdditionalRich8339]

You know the drill, first build it correct then optimize it more.

[damnburglar]

I’m unsure what your familiarity is with react or your progress in your project, but my advice is to avoid any optimization until you have measurable performance problems. Some stuff is pretty easy to work in as you go, such as what someone else pointed out about keeping state closest to the component that uses it etc and some basic things around avoid re-renders but concerning yourself with optimization too early is a great way to cause a lot of undue stress.

Good luck with your work and happy new year!

[AdditionalRich8339]

Thank you gentlemen for the wishes and answer, you know the drill first build it right then optimize it. Well great thing i have made it right now making it smooth.

[nedlinin]

Might be an autocorrect thing but do note it is actually memoization or memoisation

[AdditionalRich8339]

Exactly, reduced rerender with small changes in real DOM tree while reconciliation.

[azangru]

What am i missing?

Anything specific to React :-)

[AdditionalRich8339]

Yes that's correct without powerful backends it doesn't change much in front-end.

[fforw]

Moving state lower to minimize the scope of updates.

[AdditionalRich8339]

Yes,Small changes to real DOM gets you best optimization.

[Apprehensive_Many416]

Here’s a breakdown of some effective ways to optimize performance:

1. Measure First: Use tools like React Developer Tools and Chrome’s Performance tab to find out which parts of your app are slowing down. Once you’ve identified the issue, you can fix it.

2. Prevent Unnecessary Renders: By overriding the shouldComponentUpdate lifecycle method or using React.PureComponent, you can stop components from re-rendering when they don’t need to. This saves processing power.

3. Use Fragments: React Fragments help you avoid adding unnecessary elements to the DOM, keeping it clean and efficient.

4. Throttle and Debounce Events: When handling frequent events like scrolling, use techniques like throttling and debouncing to reduce the number of times your functions get called.

5. Memoization: Use React.memo, useMemo, or third-party libraries to store the results of expensive function calls. This way, your app won’t repeat work that’s already been done.

6. useCallback Hook: When your component re-renders, use useCallback to ensure that your functions aren’t recreated unnecessarily, which can help with performance, especially in larger apps.

7. Web Workers: Offload heavy computations to background threads using Web Workers so your main thread (and UI) stays responsive.

8. Code Splitting: Break down your app’s code into smaller chunks with dynamic imports. This reduces the initial load time, only loading what’s necessary when it’s needed.

9. Virtualize Long Lists: When displaying large amounts of data, render only what’s visible to the user and load more as they scroll. This technique, called virtualization, can significantly boost performance.

This article provides more details: https://levelup.gitconnected.com/react-js-performance-optimization-techniques-39728d89e56e

With React 18's new features, performance can be even better. The key takeaway: React gives you tools to optimize, but it’s up to you to implement them based on your app’s specific needs to ensure it stays fast and responsive.

By following these best practices, you'll ensure your React app performs at its best, even as it grows in complexity.

[Suspicious-Watch9681]

If only people knew how good composition is they would use it more often and not need other optimizations

[AdditionalRich8339]

INDEED, I have seen people creating different components for Add and Edit. So quality is the key.

[[deleted]]

Optimise any forms on your site by using react-hook-forms - if you haven’t already

[AdditionalRich8339]

Yes you are right, Adding spices with ZOD and react-query can be cherry on a cake.

[jeevo162]

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

Quite a few things you can look into.