# Lazy Loading 

## Introduction

<mark style="color:blue;">What is lazy loading in React?</mark>

* It is an optimization technique which prevents the entire application from loading at once. Instead the elements crucial to the UI get to be loaded first, while less important parts of the code will get loaded later. This can be useful when dealing with pages with large amounts of content which may cause performance issues.

### Reference  <a href="#reference" id="reference"></a>

#### `lazy(load)`  <a href="#lazy" id="lazy"></a>

Call `lazy` outside your components to declare a lazy-loaded React component:

```jsx
import { lazy } from 'react';

const Cards = lazy(() => import('../components/Cards'));
```

### Usage  <a href="#usage" id="usage"></a>

#### Lazy-loading components with Suspense  <a href="#suspense-for-code-splitting" id="suspense-for-code-splitting"></a>

```jsx
<Suspense fallback={<Loadings />}>
      {
        products.map((product) => (
          <Cards
            key={product.id}
            url={product.images[0]}
            desc={product.title}
            id={product.id}
            price={product.price}
          />
        ))
      }
</Suspense>
```

The output of above code will render list of product from APIs to Card Component with lazy loaded. It meant if list of product not yet response, it will show Loading Components.

<mark style="color:red;">The loading show, while waiting data response from API</mark>

<figure><img src="/files/nx81PA723SLxEUCzoRc9" alt=""><figcaption><p>Waiting Data</p></figcaption></figure>

<mark style="color:green;">**The output when data is ready.**</mark>

<figure><img src="/files/kjsdrJa7nwIQM0GHtuyE" alt=""><figcaption><p>Data Ready</p></figcaption></figure>

<mark style="color:purple;">**💡**</mark>**&#x20;Note:**&#x20;

* Suspense Component - Which will show fallback content ( i.e. loading ) while waiting for the lazy component to be loaded.
* API URL: <https://api.escuelajs.co/api/v1/products>

<br>


---

# Agent Instructions: 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://mey.istad.co/react/lazy-loading-react.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.