December 25, 2024

React.js Performance Guide

Which JS framework is the most performant? React, Vue, Svelte, Angular,…? When trying to answer this question, we often get lost in comparing benchmarks for reactivity, bundle size, memory usage and other factors.

Of course we want to choose the best framework to create performant apps! But your app will only benefit from framework performance if you also follow best practices for performance optimization of web apps in general, and React apps in particular.

So, where to start? What impacts performance, and how to speed up your apps #madewithreactjs? In this guide, we’re going through the basics of performance optimization for React apps, and list some tools and resources that will help you dive deeper into this topic.

Why you should invest in performance

🤩 Performance = Better user experience

Nobody has time for slow apps. People want to get things done fast – your app is their tool. Performance helps you build trust in your app and brand, and create a good experience.

💸 Performance = Better conversion & retention rates

A good user experience boosts your conversion and retention rates (= how many people sign up and keep using your app). That way, performance is directly contributing to your app's success.

🔍️ Performance = SEO

Search engines rank performant pages higher, and they also take user engagement into account. If your users stay longer because they can find what they need efficiently, it will impact your SEO performance positively.

💪 Performance = Better scaleability & lower cost

A codebase that follows performance best practices is easier to maintain and scale when things are getting more complex, and will cause less infrastructure costs.

8 common React performance problems & how to fix them

When we’re talking about performance, we usually mean metrics measuring our app’s load time and responsiveness.

Load time describes how long it takes to load all the code and assets we need. We’re measuring it with metrics like FCP (first contentful paint), LCP (largest contentful paint) or TTI (time to interactive). Load-time issues are mostly not caused by React-specific code.
Responsiveness or runtime performance describes everything that has to do with smooth (re-)rendering. The performance of your React code is a big factor in this. We can measure transaction durations with profiling and monitoring tools, or look at frame rates, CPU or memory usage.

We need to take both of these performance indicators into account if we want to develop apps that load and feel fast. So let's explore some common problems and their React-specific (and non React-specific) solutions!

1️⃣ Large bundle size

The larger your app is, the longer it takes to load. While that sounds obvious, it’s one of the areas where we usually get big performance wins, quickly. Our goal is always to send as little code (and other assets) as possible.

Use and optimize a bundler: Bundlers like Webpack or Vite support many performance-critical features like code splitting, minification, tree-shaking, module bundling, dependency optimization, asset optimization out of the box. If you use Webpack, don’t forget to set the mode to production to make use of its optimizations, or check the official Vite performance recommendations.
Optimize your dependencies: Review and remove imported libraries that cause unnecessary bloat using tools like bundle analyzers / visualizers, and routinely check the cost of third party code before adding it in the first place.
Enable Gzip or Brotli compression in your web server config (which is usually enabled by default if you use a CDN).

2️⃣ Unoptimized assets

As we have learned, unoptimized assets impact our bundle size. Optimizing images, media and fonts and delivering them efficiently will usually make your app load significantly faster.

Optimize images: Use modern image formats like WebP, which uses a more efficient compression algorithm compared to JPG or PNG. Resize and compress your images automatically during your build process, and use responsive image techniques (like <img srcset> or <picture>) to load images in the correct resolution.
Optimize fonts: All web fonts impact your performance load time-wise, and during rendering. Only load fonts you really need (using the WOFF2 format if possible), and optimize your font files by discarding characters you don’t need (using e.g. Munter/subfont if you self-host your fonts).
Question the necessity of design choices like large media slideshows or 6 different font styles, pointing out performance implications to the designers on your team.

3️⃣ Unnecessary and slow re-renders

Re-renders are often costly and slow. We want to keep an eye on the frequency, performance and timing of re-renders in our apps.

Check for slow renders and bottlenecks by analyzing your runtime performance with tools like the performance panel of the Chrome DevTools. (See the tools list below!)
Check for unnecessary update cascades caused by nested component structures.
Use memoization techniques to avoid small component changes triggering unnecessary re-renders. React Compiler will take over a lot of this work automatically, minimizing unnecessary re-renders for simple components – but you might still need to use manual memoization for more complex scenarios.
- memo lets you memoize components, preventing re-renders of child components when their props have not changed
- useMemo lets you cache calculation values
- useCallback lets you cache function definitions cache function definitions
Use virtualization for large lists to to speed up your initial and re-renders.
Use immutable data (instead of mutating data structures directly) to help React to determine what data has changed and reduce unnecessary re-renders.
Define functions outside of the render scope. (Else, a new instance of that function will be created every time the component re-renders!)

                        <video
                    muted
                    autoplay
                    playsinline
                    loop
                    class="brick__video">
                <source src="https://madewithvuejs.com/storage/31912/react-window-k.mp4" type="video/mp4">
            </video>


    </div>

    <div class="brick__caption">
                    <div class="brick__caption-upper">
            <a  href="https://madewithreactjs.com/react-window" class="brick__title">
                React Window
            </a>
            <span class="brick__tagline">
            Virtualize Large Lists
        </span>
        </div>
        <div class="brick__caption-lower">
            <div class="pull-left">

                                        <a href="/ui-components">#UI Components</a>
                                                        </div>
            <div class="pull-right">
        <div class="brick__views">
        <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>icon-eye-dark</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
        <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
            <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
            <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
        </g>
    </g>
</g>

636

        </div>

            <div class="brick__image-inner "
                 id="js-image-2844"
                 v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/25080/react-virtuoso.jpg'"
                style=" ">

            </div>



    </div>

    <div class="brick__caption">
                    <div class="brick__caption-upper">
            <a  href="https://madewithreactjs.com/react-virtuoso" class="brick__title">
                React Virtuoso
            </a>
            <span class="brick__tagline">
            Virtual List Component
        </span>
        </div>
        <div class="brick__caption-lower">
            <div class="pull-left">

                                        <a href="/ui-components">#UI Components</a>
                                                        </div>
            <div class="pull-right">
        <div class="brick__views">
        <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>icon-eye-dark</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
        <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
            <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
            <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
        </g>
    </g>
</g>

2.286

        </div>

            <div class="brick__image-inner "
                 id="js-image-827"
                 v-lazy-bg="'https://madewithnetworkfra.fra1.digitaloceanspaces.com/spatie-space-production/2072/ract-virtualized.jpg'"
                style=" ">

            </div>



    </div>

    <div class="brick__caption">
                    <div class="brick__caption-upper">
            <a  href="https://madewithreactjs.com/react-virtualized" class="brick__title">
                React Virtualized
            </a>
            <span class="brick__tagline">
            Virtual Rendering Components
        </span>
        </div>
        <div class="brick__caption-lower">
            <div class="pull-left">

                                        <a href="/ui-components">#UI Components</a>
                                                        </div>
            <div class="pull-right">
        <div class="brick__views">
        <svg class="svg-inline u__va--middle" width="20px" height="13px" viewBox="0 0 20 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>icon-eye-dark</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Icons" transform="translate(-313.000000, -230.000000)" fill-rule="nonzero" fill="#435B71">
        <g id="icon-eye-dark" transform="translate(313.000000, 230.000000)">
            <path d="M9.57827924,0.0932647368 C5.40166592,0.0977121053 2.23909537,3.28527789 0.162366374,6.09013053 C-0.0164829778,6.33193046 -0.0164829778,6.66216481 0.162366374,6.90396474 C2.23923803,9.71401737 5.40085034,12.9011726 9.57827924,12.9068174 C9.57872397,12.9068178 9.57916871,12.9068178 9.57961345,12.9068174 C13.7562192,12.90237 16.9187977,9.71477 18.9955264,6.90995158 C19.1743758,6.66815165 19.1743758,6.3379173 18.9955264,6.09611737 C16.9186536,3.28603053 13.7570499,0.0989094737 9.57961345,0.0932647368 C9.57916871,0.0932643033 9.57872397,0.0932643033 9.57827924,0.0932647368 L9.57827924,0.0932647368 Z M9.57827924,1.46168579 L9.57961345,1.46168579 C12.8675916,1.46681737 15.5988249,3.96846211 17.5569468,6.50236737 C15.5985806,9.03230421 12.8660264,11.5341884 9.57961345,11.5383963 C6.29104758,11.5339489 3.55933568,9.03192789 1.60094367,6.49771474 C3.55930832,3.96777789 6.29185563,1.46589368 9.57827718,1.46168579 L9.57827924,1.46168579 Z" id="Shape"></path>
            <path d="M9.57894737,3.42075158 C7.88659608,3.42075158 6.5,4.80737263 6.5,6.49969895 C6.5,8.19205947 7.88659608,9.57864632 9.57894737,9.57864632 C11.2712987,9.57864632 12.6578947,8.19205947 12.6578947,6.49969895 C12.6578947,4.80737263 11.2712987,3.42075158 9.57894737,3.42075158 Z M9.57894737,4.78917263 C10.5317492,4.78917263 11.2894737,5.54690158 11.2894737,6.49969895 C11.2894737,7.45249632 10.5317492,8.21022526 9.57894737,8.21022526 C8.62614555,8.21022526 7.86842105,7.45249632 7.86842105,6.49969895 C7.86842105,5.54690158 8.62614555,4.78917263 9.57894737,4.78917263 Z" id="Shape"></path>
        </g>
    </g>
</g>

805

        </div>

React.js Performance Guide

Why you should invest in performance

🤩 Performance = Better user experience

💸 Performance = Better conversion & retention rates

🔍️ Performance = SEO

💪 Performance = Better scaleability & lower cost

8 common React performance problems & how to fix them

1️⃣ Large bundle size

2️⃣ Unoptimized assets

3️⃣ Unnecessary and slow re-renders

4️⃣ Inefficient state & component structure

5️⃣ Too many requests & network latency

6️⃣ Unnecessary resource usage

7️⃣ Inefficient loading strategies

8️⃣ Slow perceived performance

Tools to measure & improve React performance

📊 Measuring performance

🐞 Debugging performance

🔍️ Monitoring performance

More resources about (React) performance