React 18 + Suspense + useDeferredValue

[dtinth]

• Upgraded to React 18 (has out-of-the-box support in Next.js)

• Updated the code to use Suspense API (which already works in React 17)

• Used useDeferredValue to remove the loading spinner when changing thread (this is new in React 18)

  • displayedMid = useDeferredValue(targetMid) lets MessageView render stale content instead of immediately switching to fallback.

  • To check if the currently displayed message is stale, we check that the currently displayed mid lags behind the target: targetMid !== displayedMid

• Note that the documentation about the timeoutMs argument has been removed from both useDeferredValue and startTransition since August 2020. For rationale see: Disable timeoutMs argument facebook/react#19703

  • To defer displaying the loading spinner, the targetMid !== displayedMid can be used to check if content is stale, and loading spinner can be displayed with a delay by using CSS transition delays.

CodeSandbox: https://codesandbox.io/s/github/dtinth/2022-02-09-removing-loading-spinners