Warning: Asynchronous triggered a user-blocking update that suspended.

FlowBlockFinder.tsx

import React, {
  Suspense,
  useState,
  // @ts-ignore - useDeferredValue does not exist yet in types
  useDeferredValue,
  useCallback,
  ChangeEvent,
} from 'react'
import TextField from '@material-ui/core/TextField'
import LinearProgress from '@material-ui/core/LinearProgress'
import { graphql } from 'babel-plugin-relay/macro'
import { useLazyLoadQuery } from 'react-relay/hooks'
import {
  FlowBlockFinderQuery,
  FlowBlockFinderQueryResponse,
} from '../__generated__/FlowBlockFinderQuery.graphql'
import ErrorBoundaryWithRetry from '../helpers/ErrorBoundaryWithRetry'

interface RenderFuncProps {
  search: string
}

function QueryResults({ search }: RenderFuncProps) {
  const { blocks }: FlowBlockFinderQueryResponse = useLazyLoadQuery<
    FlowBlockFinderQuery
  >(
    graphql`
      query FlowBlockFinderQuery($search: String) {
        blocks(search: $search) {
          id
          title
          description
          slug
          blockType
        }
      }
    `,
    { search },
    { fetchPolicy: 'store-or-network' }
  )
  return (
    <div>
      {blocks.map(block => (
        <div>{block.title}</div>
      ))}
    </div>
  )
}
function Results({ search }: RenderFuncProps) {
  return (
    <ErrorBoundaryWithRetry
      fallback={({ error }) => <div>Er is iets foutgegaan</div>}
    >
      <Suspense fallback={<LinearProgress />}>
        <QueryResults search={search} />
      </Suspense>
    </ErrorBoundaryWithRetry>
  )
}

export default function Asynchronous() {
  const [value, setValue] = useState('')
  const search = useDeferredValue(value, { timeoutMs: 600 })
  const onInputChange = useCallback(
    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      setValue(event.currentTarget.value)
    },
    [setValue]
  )

  return (
    <>
      <TextField
        label="Nieuw of bestaand blok"
        fullWidth
        variant="outlined"
        value={value}
        onChange={onInputChange}
      />
      <Results search={search} />
    </>
  )
}