Open manudeli opened 1 month ago
@manudeli, can you tell me more about what "suspensive interfaces" mean?
I changed description for this repository like below after #1072
"Packages to use React Suspense easily"
"Manage asynchronous operations, timing, error handling, detecting intersection of elements, and caching easily"
So I thought useTimeout could be "Suspensive interfaces(timing)"
@bigsaigon333 But I want to check whether this vision is good for you too.
What a nice discussion! I read #1072 thoroughly and agree with this description 100%.
"Manage asynchronous operations, timing, error handling, detecting intersection of elements, and caching easily"
However, I wanted to add some words after easily
, which is and declaratively
. The useTimeout
hook can be provided by any kind of utility package, and in fact, react-use already provides a useTimeout
hook.
I believe that we can provide not only any hook related to asynchronous operations but also declarative React components corresponding to those hooks. The relationship between useSuspenseQuery
and <SuspenseQuery />
is a good example.
useTimeout
-> <Timeout />
(or <Delay />
may be enough ...?)
However, I wanted to add some words after
easily
, which is anddeclaratively
I added it now! thanks for your feedback!
I believe that we can provide not only any hook related to asynchronous operations but also declarative React components corresponding to those hooks. The relationship between useSuspenseQuery and
is a good example. useTimeout ->
(or may be enough ...?)
I didn't think about <Timeout />
, Cool, but I'm curious implementation of
Well, I just thought using use
api from React!
useTimeout
will use a Promise that resolves when a specified timeout has elapsed. <Timeout />
will use use
API to expose the promise-based behaviour within a declarative component.This below is just pseudo code.
import { use } from 'react';
function createTimeoutPromise(duration) {
return new Promise(resolve => setTimeout(resolve, duration));
}
function Timeout({ duration, children, fallback }) {
use(createTimeoutPromise(duration)); // Suspend until promise resolves
return <>{children}</>; // Render children after the timeout
}
I'm trying to understand where a
What do you think, @manudeli?
I'm trying to understand where a component would be particularly useful, but I haven't come across a specific example that demonstrates its necessity. ðŸ˜
Sadly, in my opinion, It's the most important thing that finding example use cases!
import { use } from 'react'; function createTimeoutPromise(duration) { return new Promise(resolve => setTimeout(resolve, duration)); } function Timeout({ duration, children, fallback }) { use(createTimeoutPromise(duration)); return <>{children}</>; }
Good idea, but I think this will make circular suspending on render.
I fixed it as below. but it have problem that we cannot control timing promise start time
import { use } from 'react';
function createTimeoutPromise(duration) {
return new Promise(resolve => setTimeout(resolve, duration));
}
const promiseTimeout = createTimeoutPromise(duration) // single source of promise should be guaranteed to suspend only one time
function Timeout({ duration, children, fallback }) {
use(promiseTimeout);
return <>{children}</>;
}
So we can make it as cache on mount using @tanstack/react-query or @suspensive/cache to cache promise to suspend only one time on mount
import { useCache } from '@suspensive/cache';
function createTimeoutPromise(duration) {
return new Promise(resolve => setTimeout(resolve, duration));
}
function TimeoutOnlyOneTime({ duration, children, fallback }) {
useCache({
cacheKey: ["cached"],
cacheFn: () => createTimeoutPromise(duration)
}) // only one time make promise on mount of TimeoutOnlyOneTime
return <>{children}</>; // Render children after the timeout
}
Package Scope
@suspensive/react
Description
useTimeout could suspensive interfaces?
Possible Solution
No response
etc.
No response