## Зачем вообще нужен Suspense В современном фронтенде почти всё грузится асинхронно: - данные с сервера, - тяжёлые компоненты, - отдельные страницы или графики. Проблема в том, что пока что-то не загрузилось, Reactу нужно *что-то показать*. Раньше это решали костылями: флаг `loading`, `if (!data) return `, десятки `useEffect` с `fetch`. `Suspense` появился как универсальный способ решить эту задачу: *покажи заглушку, пока часть интерфейса не готова*. --- ## Сегодня vs Suspense ### Как пишем загрузку сегодня ```tsx function Profile({ id }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { setLoading(true) fetch(`/api/user/${id}`) .then(res => res.json()) .then(data => { setUser(data) setLoading(false) }) }, [id]) if (loading) return

Загрузка...

return

{user.name}

} ``` Минусы: - вручную пишем стейт `loading` - дублируем лоадер в каждом компоненте - легко забыть про обработку ошибок --- ### Как решает Suspense (будущее API) ```tsx function Profile({ id }) { const user = use(fetch(`/api/user/${id}`).then(res => res.json())) return

{user.name}

} function App({ id }) { return ( Загрузка...}> ) } ``` Разница: - никаких флагов `loading` - Suspense сам знает, что данные ещё не готовы - один `fallback` работает сразу для всего ⚠️ Важно: такой код с `use` пока только экспериментальный. Но это показывает, куда движется React. --- ## Как работает прямо сейчас ### Lazy components Самый базовый сценарий — это `React.lazy`. Допустим, у тебя есть тяжёлый компонент: ```tsx import { lazy } from "react" const Heavy = lazy(() => import("./Heavy")) function App() { return } ``` Так не сработает: пока идёт загрузка `Heavy`, React не знает, что отрендерить. Решение — обернуть его в `Suspense`: ```tsx import { Suspense, lazy } from "react" const Heavy = lazy(() => import("./Heavy")) function App() { return ( Загрузка...}> ) } ``` Теперь: - компонент грузится в фоне, - React показывает `fallback`, - когда готов — рендерит реальный компонент. --- ### Вложенные Suspense `Suspense` можно вкладывать друг в друга и делать разные заглушки для разных частей интерфейса: ```tsx Грузим всю страницу...}>

График ещё не готов...}>

Компоненты