Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Suspense и React 19 RC
В React 19 RC появилось спорное изменение в работе Suspense.
В 18 версии внутри Suspense рендерелись все компоненты и отображался fallback, пока внутри компонентов происходила загрузка данных. После окончания загрузки данных во всех компонентах вместо fallback отображались сами компоненты.
export default function App() {
return (
<Suspense fallback={<p>...</p>}>
<Header />
<Navbar />
<main>
<Content />
</main>
<Footer />
</Suspense>
)
}
В React 19 RC изменилось поведение Suspense. Если компонент приостановится, то его соседние компоненты не будут отрендерены до тех пор, пока компонент не закончит загрузку данных. Это привело к тому, что вместо параллельной загрузки данных во всех компонентах, он начал делать последовательную загрузку данных, создавая «водопад» запросов.
У этого решения есть и положительный эффект: есть возможность сразу показывать fallback, избегая лишнего рендера.
Для решения проблемы «водопада» запросов нужно делать предварительные запросы на уровне роута:
export const Route = createFileRoute('/')({
loader: ({ context: { queryClient } }) => {
queryClient.ensureQueryData(repoOptions('tanstack/query'))
queryClient.ensureQueryData(repoOptions('tanstack/table'))
},
component: () => (
<Suspense fallback={<p>...</p>}>
<RepoData name="tanstack/query" />
<RepoData name="tanstack/table" />
</Suspense>
),
})
В этом случае, когда React начнет рендерить дочерние компоненты Suspense, не имеет значения, будет ли он рендерить второй компонент RepoData или нет, потому что данные для него уже были запрошены.
Скорее всего поведение Suspense еще изменится перед релизом React 19, т.к. не всех устраивает текущее поведение. Например, библиотека react-three-fiber основана на асинхронной работе и полагается на то, как работает Suspense в React 18.
https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts
27 · 3.2K ·