What is lazy loading in React?

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

import { lazy, Suspense, useState } from 'react';
import { Routes, Route } from 'react-router-dom';

// The import only happens when the component first renders
const Reports = lazy(() => import('./pages/Reports'));

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(true)}>Open reports</button>
      <Suspense fallback={<p>Loading module…</p>}>
        {show && <Reports />}
      </Suspense>
      <Routes>
        <Route path="/reports" element={
          <Suspense fallback={<p>Loading…</p>}><Reports /></Suspense>
        } />
      </Routes>
    </>
  );
}