Does <Await /> have to be a component?

[rubber-duck-software]

I'm working on adopting the new 6.4 data loading apis. I've been excited about this for months. As I'm adopting it, I have found one page which should use deferred data loading, but the component is a bit awkward for this page's needs. Would it break 6.4s loading model if I instead wrote a useAwait hook? The hook would work as follows: throws unresolved promise, throws rejected promise result, else returns resolved promise result. This could be implemented using the same "TrackedPromise" mechanism ReactRouter uses. Is there a reason I shouldn't use this? Could this be a helper provided by react router?

Just getting started with 6.4. Any help would be appreciated.

As an example of doing this as a hook, it might be:

function useAwait(resolve, options) {
  const forceUpdate = useForceUpdate()

  let promise: TrackedPromise | null = null
  let status: AwaitRenderStatus = 'pending'

  if (!(resolve instanceof Promise)) {
    // Didn't get a promise - provide as a resolved promise
    status = 'success'
    promise = Promise.resolve()
    Object.defineProperty(promise, '_tracked', { get: () => true })
    Object.defineProperty(promise, '_data', { get: () => resolve })
  } else if ((resolve as TrackedPromise)._tracked) {
    // Already tracked promise - check contents
    promise = resolve
    status = promise._error !== undefined ? 'error' : promise._data !== undefined ? 'success' : 'pending'
  } else {
    // Raw (untracked) promise - track it
    status = 'pending'
    Object.defineProperty(resolve, '_tracked', { get: () => true })

    promise = resolve
      .then(
        (data: any) => Object.defineProperty(resolve, '_data', { get: () => data }),
        (error: any) => Object.defineProperty(resolve, '_error', { get: () => error })
      )
      .finally(forceUpdate)
  }

  if (status === 'error') {
    throw promise._error
  } else if (status === 'pending') {
    if (options?.suspense) {
      throw promise
    } else {
      return { data: options?.placeholder || null, isLoading: true }
    }
  } else {
    return { data: promise._data, isLoading: false }
  }
}