# Suspense

A concurrent mode safe way to use RxJS with React Suspense. See Render-as-You-Fetch (using Suspense) for usage.

# ObservableResource

Class ObservableResource<TInput, TOutput>

Rewires Observable to Relay-like Suspense resource.

v2.2.0 Added since v2.2.0.

Type parameters:

Constructors:

new ObservableResource(
  input$: Observable<TInput>,
  isSuccess?: (value: TInput) => value is TOutput
): ObservableResource

Parameters:

Name	Type	Description
`input$`	`Observable<TInput>`	An Observable.
`isSuccess`	`(value: TInput): value is TOutput`	Optional function that determines if the value emitted from `input$` is of success state. If false a Suspense is triggered. Default all true.

Public Properties:

Name	Type	Description
`shouldUpdate$$`	`Subject<undefined>`	Emit when the Component needs extra rerendering.

Public Methods:

Name	Type	Description
`read`	`(): TOutput`	Return cached value on success state. Throw suspender on pending state. Throw error on error state.
`destroy`	`(): void`	UnSubscribe input Observable.
`reload`	`(newInput$?: Observable<TInput>): void`	v2.3.5 Clean up and resubscribe input Observable. For errored hot observable there is no way to resubscribe hence a `newInput$` must be provided. Otherwise if omitted the original observable will be resubscribed. It is recommended to use cold observable if possible for easy reloading. (Also for those who are unfamiliar with observable temperature, even though a `Subject` is hot, `subject.pipe(...)` is cold.)

useObservableSuspense<TInput, TOutput>(
  resource: ObservableResource<TInput, TOutput>
): TOutput

Consume the Observable resource.

v2.2.0 Added since v2.2.0.

Unlike Promise, Observable implements multiple push protocol. This hook triggers necessary re-rendering when Suspense should restart.

Type parameters:

Parameters:

Name	Type	Description
`resource`	`ObservableResource<TInput, TOutput>`	Observable resource.

Returns:

TOutput resource value.