Асинхронная подгрузка изображений при запуске проекта React
Есть .json-файл, который хранит в себе объекты следующего вида:
{
id: number,
photo: string,
name: string
}
Размер файла 5мб и если подгружать его в момент отображение - то это заметно замедляет отрисовку компоненты. Вопрос: как реализовать асинхронную подгрузку этого файла при запуске проекта, а не в момент рендеринга компоненты, которая перебирает и отображает изображения списком?
Ответы (1 шт):
Автор решения: Yuriy Sidorov
→ Ссылка
Может сделать цикл который будет запускаться при парсинге json и устанавливать на каждой итерации setState(), например:
const [list, setList] = useState([]);
fetch('url').then((res) => res.json().forEach((item) => setList((prev) => [...prev, item])));
return (<ul>{list.map((item) => <li key={item.id}>{item.name}</li>)}</ul>)
Идея заключается в том чтобы отрисовывать компоненты списка до того как распарсятся все записи.