Загрузка данных в React Hooks объединяет два ключевых хука: useState для управления состоянием и useEffect для побочных эффектов. Хук useEffect запускает асинхронный вызов API с помощью axios, а затем обновляет локальное состояние компонента полученными данными.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
useStateuseEffect для выполнения вызова APIfunction App() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
(async () => {
const result = await axios('http://hn.algolia.com/api/v1/search?query=react');
setData(result.data);
})();
}, []);
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
Пустой массив зависимостей [], передаваемый вторым аргументом, критически важен. Это гарантирует, что эффект выполнится только один раз при монтировании компонента, предотвращая лишние вызовы API при каждом рендере или обновлении. Без этого массива эффект будет срабатывать повторно, что приведёт к проблемам с производительностью.
Этот паттерн удобен для асинхронной загрузки данных: он сохраняет управление состоянием компонента чистым и понятным, что делает его стандартным подходом к получению данных в современных приложениях React.
Пустой массив зависимостей [] в useEffect гарантирует, что API запрос выполнится только один раз при монтировании компонента, предотвращая бесконечные циклы перерендера.
Новый — ещё не проверен сообществом
Вы