React.memo & Lazy Loading

React.memo prevents re-renders of unchanged components. lazy() enables code splitting.

Syntax

REACT

1
2

const MemoizedComponent = React.memo(MyComponent);
const LazyComponent = React.lazy(() => import('./MyComponent'));

React.memo and Lazy Loading

REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import React, { memo, lazy, Suspense } from "react";

const HeavyComponent = memo(function HeavyComponent({ data }) {
    console.log("Rendering HeavyComponent");
    return <div>{data}</div>;
});

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
    return (
        <div>
            <HeavyComponent data="Hello" />
            <Suspense fallback={<p>Loading...</p>}>
                <LazyComponent />
            </Suspense>
        </div>
    );
}

Try It Yourself

Practice

1

Exercise

Practice this concept.

Answer

Write the code as shown above.

Quick Quiz

1

What did you learn?

Concept A

Concept B

Concept C

Concept D

This covers the basics.

Retry Quiz

Interview Questions

Explain this concept.

It is a fundamental React feature.

Tutorial Complete

Back to React