How to manage suspense within the bounds of the component

[gustavorino]

Every suspense demo on the docs is calling global functions and connecting to global resource/observables.

How can I create a resource within the component? I've tried using useMemo but it made the component to LOOP.

For each component I have a dependency from the props, and this component is not Singleton.

example:

function ConfigProvider(props: ConfigProviderProps) {
  const { id,children } = props

// this works just fine
  const request$ = useObservable(() => {
    return fromFetch(`http://localhost:3031/config/${id}`).pipe(
      switchMap((data) => {
        return data.json()
      })
    )
  }, [id])

  const data = useObservableState(request$)

// ??? const suspeded$ = useObservableSuspense ???

  return (
   <div>
      {JSON.stringify(data)}
      {children}
  </div>
  )
}

Now, somewhere else in the application

function OtherComponent(){

 return <>
<Suspense fallback={<div>Loading first config</div>}>
   <ConfigProvider id="foo1">..Stuff...</ConfigProvider>
</Suspense>
<Suspense fallback={<div>Loading second config</div>}>
   <ConfigProvider id="foo2">..Other Stuff...</ConfigProvider>
</Suspense>
</>
}

[gustavorino]

Sorry, I've just realized this is not really something related to observable-hooks but to react suspense inner workings.

https://reactjs.org/docs/concurrent-mode-suspense.html#for-library-authors