Description
React version: 0.0.0-experimental-4ead6b530
ReactDOM version: 0.0.0-experimental-4ead6b530
Steps To Reproduce
I'm not sure if this is a bug or a misunderstanding. As part of learning Suspense and using it in a project, I was puzzled by the behavior of useDeferredValue. When using it, my component seemed to use the deferred value until the new UI state was unsuspended/done rendering, regardless of the timeoutMs parameter.
I forked the Code Sandbox linked from the Concurrent UI Patterns to try and distill the problem. First, when using useDeferredValue in the child component, the timeoutMs does have the expected effect, when using either version of React. But then, when I moved the use of useDeferredValue higher to the App component to match how I was using it, the behavior differed. When using 0.0.0-experimental-5faf377df, it does have an effect. But in the most recent react@experimental, 0.0.0-experimental-4ead6b530, it no longer has an effect.
function App() {
const [resource, setResource] = useState(initialResource);
const deferredResource = useDeferredValue(resource, {
timeoutMs: 42 // Doesn't appear to be making a difference in the latest React
});
const isPending = deferredResource !== resource;
return (
<>
<button
disabled={isPending}
onClick={() => {
// startTransition(() => {
const nextUserId = getNextId(resource.userId);
setResource(fetchProfileData(nextUserId));
// });
}}
>
Next
</button>
{isPending ? " Loading..." : null}
<ProfilePage
resource={deferredResource}
isStale={deferredResource !== resource}
/>
</>
);
}
function ProfilePage({ resource, isStale }) {
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails resource={resource} />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline resource={resource} isStale={isStale} />
</Suspense>
</Suspense>
);
}