Introduction
With useTask
, you can combine task
with react <Suspense>
Task
?
What is type Task = <A>() => Promise<A>;
Task<A>
represents an asynchronous computation that yields a value of typeA
and never fails.
<Suspense>
?
What is
<Suspense>
lets you display a fallback until its children have finished loading.
Getting Started
useTask
Create a task
const getTitle = () => new Promise<string>((rs) => rs("Hello"));
const Title = () => {
return <h1>title</h1>;
};
Add useTask hook in the component
import { useTask } from "@richard-wang-tw/use-task";
const Title = () => {
// the first argument is task
// the second is unique id of the task
const title = useTask(getTitle, "getTitle");
return <h1>{title}</h1>;
};
<suspense>
Wrap the component with const TitleLoader = () => (
<Suspense fallback={<h1>Loading</h1>}>
<Title />
</Suspense>
);
deleteTaskCache
You can use deleteTaskCache("getTitle")
on timeout or triggered by user interaction.
This feature allow you to reload data on next render.