> For the complete documentation index, see [llms.txt](https://olga-f.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://olga-f.gitbook.io/react/performance/how-to-speed-up-your-app.md).

# How to speed up your app

Load what's absolutely needed at the beginning of the page load. The rest can be loaded on-demand.

```javascript
import React from 'react'

// remove this import
import OnDemand from '../ondemand'
```

add  `React.lazy`

```javascript
import React from 'react'

const OnDemand = React.lazy(()=> import('../ondemand'))
```

and `React.Suspense` component higher up in the tree

```jsx
 <React.Suspense fallback={<div>loading...</div>}>
          {showOnDemand ? <OnDemand /> : null}
 </React.Suspense>
```

{% hint style="info" %}
If you’re using [webpack](https://webpack.js.org/) to bundle your application, then you can use [webpack magic comments](https://webpack.js.org/api/module-methods/#magic-comments) to have webpack instruct the browser to prefetch dynamic imports.
{% endhint %}

```jsx
const OnDemand = React.lazy(() => import(/* webpackPrefetch: true */ '../ondemand'))
```

We could have OnDemand start loading as soon as the user hovers over the element.

```jsx
const loadOnDemand = () => import('../ondemand')
const OnDemand = React.lazy(loadOnDemand)
```

```jsx
<label  onMouseEnter={loadOnDemand} onFocus={loadOnDemand} >
// our element
</label>
```

## Next.js

&#x20;Next.js supports ES2020 [dynamic `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) for JavaScript. With it, you can import JavaScript modules dynamically and work with them. They also work with SSR.

```jsx
<input
...
        onChange={async (e) => {
          ...
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)
          ...
        }}
      />
```

```jsx
// remove this import
import { javascript } from "@codemirror/lang-javascript"

// add this where needed access to {javascript}
const javascript = (await import("@codemirror/lang-javascript")).javascript;

```

&#x20;

Dynamically import the `Hello` component with  `loading` component:

```jsx
import dynamic from 'next/dynamic'

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <p>...</p> }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithCustomLoading />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
```

With **no server-side** rendering:

```jsx
import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home
```

|   |
| - |

## Lazy Loading components with React-Loadable

&#x20;[React-Loadable](https://github.com/jamiebuilds/react-loadable) - a higher-order component for dynamically loading a module before rendering it, a loading component is rendered while the module is unavailable.

```bash
npm i react-loadable
```

```jsx
import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

// ...
// ...

    return <LoadableComponent/>


```

## Use only what you need

For example,

```jsx
import _ from 'lodash'
```

change to:

```jsx
import transform from 'lodash/transform'
```

OR  in this case, you can use the Babel plugin for lodash. &#x20;

In your *.babelrc :*

```jsx
"plugins": [
"lodash"
]
```

|   |
| - |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://olga-f.gitbook.io/react/performance/how-to-speed-up-your-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.