---
title: Асинхронность
seo:
  title: Асинхронность — React Developer
  description: Тема «Асинхронность» для собеседования React Developer. Как выполнить HTTP-запросы в React? Как обновить состояние компонента после выполнения асинхронной операции?
---

[Все темы React Developer](/react-developer)

## <strong>Как выполнить HTTP-запросы в React?</strong> [#q-14bee738d69b81608a3ec697829b6f91]

Для выполнения HTTP-запросов в React можно использовать стандартные методы, такие как <code>fetch</code> или библиотеки, такие как <code>axios</code>.

#### Пример с использованием <code>fetch</code>&#58;

```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : "Loading..."}
    </div>
  );
};

export default MyComponent;
```

#### Пример с использованием <code>axios</code>&#58;

```jsx
import React, { useState, useEffect } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios
      .get("https://api.example.com/data")
      .then((response) => setData(response.data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : "Loading..."}
    </div>
  );
};

export default MyComponent;
```

Запрос при появлении компонента можно выполнить в useEffect. Проверяйте response.ok у fetch, храните состояние ошибки и отменяйте запрос либо игнорируйте устаревший ответ в cleanup. Запрос по действию пользователя запускайте из обработчика события. Кеширование и повторную загрузку удобнее поручить библиотеке или загрузчику маршрута.

:::note[Ссылки для изучения]

1. [Асинхронность в React](https://reactdev.ru/libs/redux/advanced/AsyncActions/)
   :::

---

## <strong>Как обновить состояние компонента после выполнения асинхронной операции?</strong> [#q-14bee738d69b8161ae75e4f5ecb0306c]

Для обновления состояния компонента после выполнения асинхронной операции в React используйте <code>useState</code> для хранения состояния и <code>useEffect</code> для выполнения асинхронной операции.

#### Шаги&#58;

1. <strong>Создайте состояние с помощью</strong> <code>useState</code>.

1. <strong>Выполните асинхронную операцию внутри</strong> <code>useEffect</code>
   .

1. <strong>Обновите состояние при завершении асинхронной операции</strong>.

#### Пример&#58;

```jsx
import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://api.example.com/data");
        const result = await response.json();
        setData(result); // Обновление состояния
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []); // Пустой массив зависимостей, чтобы выполнить только при монтировании

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : "Loading..."}
    </div>
  );
};

export default MyComponent;
```

Для обновления состояния компонента после асинхронной операции используйте <code>useState</code> для хранения данных и <code>useEffect</code> для выполнения асинхронного запроса и последующего обновления состояния.

:::note[Ссылки для изучения]

1. [Асинхронность в React](https://reactdev.ru/libs/redux/advanced/AsyncActions/)
   :::

---

## <strong>Как реализовать асинхронную загрузку компонентов с помощью</strong> <code>React Router</code><strong>?</strong> [#q-14bee738d69b81ad824af0e20ed23bc7]

Для асинхронной загрузки компонентов в React Router используйте React.lazy и React.Suspense.

#### Шаги&#58;

1. <strong>Используйте</strong> <code>React&#46;lazy</code>
   <strong>для динамического импорта компонента</strong>.

1. <strong>Обертайте маршруты в</strong> <code>React&#46;Suspense</code>
   <strong>с fallback-контентом</strong>.

#### Пример для React Router 5, использующий Switch и component&#58;

```jsx
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);

export default App;
```

Для асинхронной загрузки компонентов с React Router используйте <code>React&#46;lazy</code> для динамического импорта и оборачивайте маршруты в <code>React&#46;Suspense</code> для отображения fallback-контента во время загрузки компонентов.

:::note[Ссылки для изучения]

1. [Асинхронность в React](https://reactdev.ru/libs/redux/advanced/AsyncActions/)
   :::

---

## <strong>Какие паттерны для работы с асинхронностью в React?</strong> [#q-14bee738d69b81fcbaf4f8bab891faf9]

Паттерны для работы с асинхронностью в React

{/* prettier-ignore */}
1. <strong>Использование</strong> <code>useEffect</code>&#58;

    - Выполнение асинхронных операций при монтировании или обновлении компонента.

    - Пример&#58;

        ```javascript
        useEffect(() => {
          const fetchData = async () => {
            const response = await fetch('https://api.example.com/data');
            const result = await response.json();
            setData(result);
          };
          fetchData();
        }, []);
        ```

1. <strong>Использование</strong> <code>async</code><strong>/</strong><code>await</code>&#58;

    - Облегчение работы с асинхронными операциями внутри функций.

    - Пример&#58;

        ```javascript
        const fetchData = async () => {
          const response = await fetch('https://api.example.com/data');
          const result = await response.json();
          setData(result);
        };
        ```

1. <strong>Использование</strong> <code>axios</code>&#58;

    - Библиотека для упрощения HTTP-запросов.

    - Пример&#58;

        ```javascript
        import axios from 'axios';

        useEffect(() => {
          axios.get('https://api.example.com/data')
            .then(response => setData(response.data))
            .catch(error => console.error(error));
        }, []);
        ```

1. <strong>Использование</strong> <code>React Query</code>&#58;

    - Библиотека для управления состоянием асинхронных данных.

    - Пример для React Query 3. В TanStack Query 5 используется пакет @tanstack/react-query и объект параметров useQuery&#58;

        ```javascript
        import { useQuery } from 'react-query';

        const { data, error, isLoading } = useQuery('data', () =>
          fetch('https://api.example.com/data').then(res => res.json())
        );
        ```

Паттерны для работы с асинхронностью в React включают использование хуков <code>useEffect</code>, синтаксиса <code>async</code>/<code>await</code>, библиотеки <code>axios</code>, и <code>React Query</code> для управления состоянием асинхронных данных.

:::note[Ссылки для изучения]

1. [Асинхронность в React](https://reactdev.ru/libs/redux/advanced/AsyncActions/)
   :::