Learn React 18 in 5 minutes

https://unsplash.com/photos/xkBaqlcqeb4

Understand Suspense

const TodoList: React.VFC = () => {
const { isLoading, error, data } = useQuery('todoData', loadTodoData);

if (isLoading) {
// Displaying skeleton while loading
return <TodoListSkeleton />;
}
if (error) {
// Error procces
return <p>Hello React 18</p>;
}

return <TodoListContents data={data} />;
}
const TodoList: React.VFC = () => {
const { data } = useQuery('todoData', loadTodoData);

return <TodoListContents data={data} />;
};
const App: React.VFC = () => {
return (<PageLayout>
<TodoList />
{/* TodoList can't be rendering」 */}
</PageLayout>);
};

Suspense component that handles loading

const App: React.VFC = () => {
return (<PageLayout>
<Suspense fallback={<TodoListSkeleton />}>
<TodoList />
{/* TodoList can't be rendering. Suspense can accept it. */}
</Suspense>
</PageLayout>);
};
const App: React.VFC = () => {
return (<PageLayout>
<Suspense fallback={<PageSkeleton />}>
<MyProfile />
<TodoList />
<Comments />
</Suspense>
</PageLayout>);
};
const App: React.VFC = () => {
return (<PageLayout>
<Suspense fallback={<MyProfileSkeleton />}>
<MyProfile />
</Suspense>
<Suspense fallback={<TodoSkeleton />}>
<TodoList />
</Suspense>
<Suspense fallback={<CommentsSkeleton />}>
<Comments />
</Suspense>
</PageLayout>);
};

Relationship between Suspense and React 18

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store