fix: use deferred value to avoid suspense issues with inputting text (#6996)

fix: use deferred value to avoid suspense issues with inputting text during supsended render causing errors
This commit is contained in:
Nate Wienert 2023-07-25 06:57:32 -10:00 committed by GitHub
parent 8592a4a54d
commit 9f71e384b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,5 +1,4 @@
import usePrevious from 'hooks/usePrevious'
import React, { Suspense } from 'react'
import React, { Suspense, useDeferredValue } from 'react'
/**
* This is useful for keeping the "last rendered" components on-screen while any suspense
@ -9,6 +8,7 @@ import React, { Suspense } from 'react'
*/
export const SuspenseWithPreviousRenderAsFallback = (props: { children: React.ReactNode }) => {
const previousContents = usePrevious(props.children)
return <Suspense fallback={previousContents ?? null}>{props.children}</Suspense>
const previousChildren = useDeferredValue(props.children)
return <Suspense fallback={previousChildren ?? null}>{props.children}</Suspense>
}