---
title: Ленивая загрузка
seo:
title: Ленивая загрузка — React Developer
description: 'Тема «Ленивая загрузка» для собеседования React Developer. Как реализовать lazy loading в React с использованием Suspense? Как работает "ленивая загрузка" (lazy loading) компонентов в React?'
---
[Все темы React Developer](/react-developer)
## Как реализовать lazy loading в React с использованием Suspense? [#q-14bee738d69b81168d96d50cd1e6551e]
Lazy loading позволяет загружать компоненты только тогда, когда они
необходимы, улучшая производительность приложения.
#### Шаги:
1. Используйте React.lazy
для динамического импорта компонента:
```javascript
const MyComponent = React.lazy(() => import("./MyComponent"));
```
1. Обертайте компонент в React.Suspense
и укажите fallback-контент:
```jsx
import React, { Suspense } from "react";
const App = () => (
Loading...}>
);
export default App;
```
#### Пример:
```jsx
import React, { Suspense } from "react";
const MyComponent = React.lazy(() => import("./MyComponent"));
const App = () => (
Loading...}>
);
export default App;
```
Для реализации lazy loading в React используйте React.lazy для динамического импорта компонентов и React.Suspense для отображения fallback-контента во время их загрузки.
:::note[Ссылки для изучения]
1. [Оптимизация производительности в React](https://ru.legacy.reactjs.org/docs/optimizing-performance.html)
:::
---
## Как работает "ленивая загрузка" (lazy loading) компонентов в React? [#q-14bee738d69b81fea192de8bf350a07d]
Ленивая загрузка — это техника, позволяющая загружать
компоненты только тогда, когда они необходимы, что улучшает производительность
приложения.
#### Основные шаги:
{/* prettier-ignore */}
1. Динамический импорт с React.lazy:
- React.lazy используется для динамического импорта компонентов.
```javascript
const MyComponent = React.lazy(() => import('./MyComponent'));
```
1. Обертка в React.Suspense:
- Компонент оборачивается в React.Suspense с указанием fallback-контента, который отображается во время загрузки компонента.
```jsx
import React, { Suspense } from 'react';
const App = () => (
Loading...}>
);
export default App;
```
#### Пример:
```jsx
import React, { Suspense } from "react";
// Динамический импорт компонента
const MyComponent = React.lazy(() => import("./MyComponent"));
const App = () => (
Loading...}>
);
export default App;
```
Ленивая загрузка компонентов в React осуществляется с помощью React.lazy для динамического импорта и React.Suspense для указания fallback-контента, что позволяет загружать компоненты только при необходимости и улучшать производительность приложения.
:::note[Ссылки для изучения]
1. [Оптимизация производительности в React](https://ru.legacy.reactjs.org/docs/optimizing-performance.html)
:::
---
## Как работает "ленивая загрузка" (lazy loading) сторонних библиотек в React? [#q-14bee738d69b81a48cb1f378c657daa4]
Ленивая загрузка сторонних библиотек в React позволяет
загружать библиотеки только при необходимости, улучшая производительность
приложения.
#### Основные шаги:
{/* prettier-ignore */}
1. Использование динамического импорта:
- Используйте функцию import() для динамического импорта библиотеки.
1. Работа с импортированной библиотекой:
- Обработайте асинхронный импорт с помощью async/await или .then().
#### Пример с async/await:
```jsx
import React, { useState, useEffect } from "react";
const MyComponent = () => {
const [library, setLibrary] = useState(null);
useEffect(() => {
const loadLibrary = async () => {
const { default: lib } = await import("some-library");
setLibrary(() => lib);
};
loadLibrary();
}, []);
if (!library) {
return Loading library...
;
}
// Использование библиотеки после загрузки
return {/* Используйте загруженную библиотеку */}
;
};
export default MyComponent;
```
#### Пример с .then():
```jsx
import React, { useState, useEffect } from "react";
const MyComponent = () => {
const [library, setLibrary] = useState(null);
useEffect(() => {
import("some-library").then(({ default: lib }) => {
setLibrary(() => lib);
});
}, []);
if (!library) {
return Loading library...
;
}
// Использование библиотеки после загрузки
return {/* Используйте загруженную библиотеку */}
;
};
export default MyComponent;
```
Ленивая загрузка сторонних библиотек в React осуществляется с помощью динамического импорта import(), что позволяет загружать библиотеки только при необходимости, улучшая производительность приложения.
:::note[Ссылки для изучения]
1. [Оптимизация производительности в React](https://ru.legacy.reactjs.org/docs/optimizing-performance.html)
:::
---
## Как реализовать "ленивую загрузку" (lazy loading) изображений в React? [#q-14bee738d69b81d08088fb51ea34ca05]
Для реализации ленивой загрузки изображений в React можно использовать библиотеку react-lazyload или встроенный атрибут loading="lazy".
#### С использованием react-lazyload:
1. Установка библиотеки:
```bash
npm install react-lazyload
```
1. Использование компонента LazyLoad:
```jsx
import React from "react";
import LazyLoad from "react-lazyload";
const App = () => (
);
export default App;
```
#### С использованием атрибута loading="lazy":
```jsx
const App = () => (
);
export default App;
```
Для ленивой загрузки изображений в React используйте библиотеку react-lazyload или встроенный атрибут loading="lazy" для элементов <img>.
:::note[Ссылки для изучения]
1. [Оптимизация производительности в React](https://ru.legacy.reactjs.org/docs/optimizing-performance.html)
:::
---
## Что такое "code splitting" (разделение кода) в React? [#q-14bee738d69b81368e05dcade6239044]
Code Splitting — это техника оптимизации, которая позволяет
разбивать приложение на небольшие части (чанки), загружаемые по мере
необходимости, что улучшает производительность и уменьшает время загрузки.
#### Основные методы:
{/* prettier-ignore */}
1. Динамический импорт:
- Использование import() для загрузки модулей по требованию.
```javascript
const MyComponent = React.lazy(() => import('./MyComponent'));
```
1. React.lazy и React.Suspense:
- Для асинхронной загрузки компонентов и отображения fallback-контента.
```jsx
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
const App = () => (
Loading...}>
);
export default App;
```
Code Splitting в React улучшает производительность, разбивая приложение на небольшие чанки, которые загружаются по мере необходимости, используя динамические импорты и React.lazy с React.Suspense.
:::note[Ссылки для изучения]
1. [Оптимизация производительности в React](https://ru.legacy.reactjs.org/docs/optimizing-performance.html)
:::
