From 9f71e384b28dad0201925ca32f69ef6750a0662f Mon Sep 17 00:00:00 2001
From: Nate Wienert <natewienert@gmail.com>
Date: Tue, 25 Jul 2023 06:57:32 -1000
Subject: [PATCH] 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
---
 .../Suspense/SuspenseWithPreviousRenderAsFallback.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Suspense/SuspenseWithPreviousRenderAsFallback.tsx b/src/components/Suspense/SuspenseWithPreviousRenderAsFallback.tsx
index 13743e1db8..97964ba843 100644
--- a/src/components/Suspense/SuspenseWithPreviousRenderAsFallback.tsx
+++ b/src/components/Suspense/SuspenseWithPreviousRenderAsFallback.tsx
@@ -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>
 }