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

--

--

--

80% is the creation, the rest is depression. Frontend developer and data scientist, designer. Looking for Physics Ph.D Twitter: @_t_i_show

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding Higher Order Functions in JavaScript

Developing ESTv2 — Getting

React Core Concepts You Need To Know

Clean up

The Ultimate JavaScript Cheatsheet!

A Small History Of Airscript

How Does a Web Page Load? What Happens in the Background?

How does a Web page load what happens in the background

Investigating Base64 Encoding Issue

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
TiShow

TiShow

80% is the creation, the rest is depression. Frontend developer and data scientist, designer. Looking for Physics Ph.D Twitter: @_t_i_show

More from Medium

From JS to React

Concatenated strings vs ES6 template literals in React

React App from Scratch: SharkAid

Using the State Hook in React