{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Что делает "},{"type":"text","marks":[{"type":"code"}],"text":""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"компонент-обёртка"},{"type":"text","text":", который React использует,"},{"type":"hardBreak"},{"type":"text","text":"чтобы "},{"type":"text","marks":[{"type":"bold"}],"text":"“поймать”"},{"type":"text","text":" момент, когда дочерний компонент "},{"type":"text","marks":[{"type":"bold"}],"text":"временно не готов"},{"type":"text","text":" (например, грузится)."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда React встречает внутри дерева компонент, который "},{"type":"text","marks":[{"type":"bold"}],"text":"“завис”"},{"type":"text","text":" (suspended) —"},{"type":"hardBreak"},{"type":"text","text":"он "},{"type":"text","marks":[{"type":"bold"}],"text":"останавливает рендер"},{"type":"text","text":" и показывает "},{"type":"text","marks":[{"type":"bold"}],"text":"запасной UI"},{"type":"text","text":" из пропа "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"📘 Синтаксис:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { Suspense, lazy } from 'react';\n\nconst LazyComponent = lazy(() => import('./LazyComponent'));\n\nfunction App() {\n return (\n Загрузка...}>\n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Пока React грузит "},{"type":"text","marks":[{"type":"code"}],"text":"LazyComponent"},{"type":"text","text":" (динамический импорт),"},{"type":"hardBreak"},{"type":"text","text":"он показывает "},{"type":"text","marks":[{"type":"code"}],"text":"

Загрузка...

"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда загрузка завершена → React "},{"type":"text","marks":[{"type":"bold"}],"text":"автоматически заменяет fallback"},{"type":"hardBreak"},{"type":"text","text":"на отрендеренный "},{"type":"text","marks":[{"type":"code"}],"text":"LazyComponent"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"резервный интерфейс"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"который отображается "},{"type":"text","marks":[{"type":"bold"}],"text":"вместо “зависших” компонентов"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"пока React ждёт их загрузки."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обычно сюда ставят:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"спиннер 🔄;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"лоадер;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"скелетон (placeholder-карточки);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"текст “Загрузка данных...”."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔧 Пример"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"}>\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"code"}],"text":"UserProfile"},{"type":"text","text":" грузится (например, через "},{"type":"text","marks":[{"type":"code"}],"text":"React.lazy"},{"type":"text","text":" или data fetching API) →"},{"type":"hardBreak"},{"type":"text","text":"React временно показывает "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда загрузка завершена → спиннер исчезает, и появляется "},{"type":"text","marks":[{"type":"code"}],"text":"UserProfile"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Как React “знает”, что нужно показать fallback"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компоненты, которые могут “приостановиться”, выбрасывают специальный "},{"type":"text","marks":[{"type":"bold"}],"text":"Promise"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"React “ловит” этот Promise, понимает:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“Окей, этот кусок UI пока не готов”"},{"type":"hardBreak"},{"type":"text","text":"и показывает "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":" до тех пор, пока Promise не завершится."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📦 Пример под капотом (упрощённо):"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const Lazy = React.lazy(() => import('./Component'));\n// React.lazy возвращает компонент, который при первом рендере “suspends” (кидает Promise)\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Можно ли использовать "},{"type":"text","marks":[{"type":"bold"}],"text":"несколько Suspense-обёрток"},{"type":"text","text":"?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Да ✅ — и "},{"type":"text","marks":[{"type":"bold"}],"text":"это лучшая практика!"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ты можешь "},{"type":"text","marks":[{"type":"bold"}],"text":"вложить"},{"type":"text","text":" несколько "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"-компонентов,"},{"type":"hardBreak"},{"type":"text","text":"чтобы "},{"type":"text","marks":[{"type":"bold"}],"text":"изолировать области загрузки"},{"type":"text","text":" и управлять UX гибко."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"📍 Пример 1 — вложенные Suspense"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Загрузка страницы...}>\n

\n \n Загрузка списка...}>\n \n \n \n Загрузка подвала...}>\n

Suspense при загрузке компонентов

Комментарии