Function useLayoutObservableState

Same as [[useObservableState]] except the subscription is established under useLayoutEffect.

A sugar hook for getting values from an Observable.

It can be used in two ways:

1. Offer an Observable and an optional initial state.

   const output = useLayoutObservableState(input$, initialState)
   Copy

2. Offer an epic-like function and an optional initial state.

   const [output, onInput] = useLayoutObservableState(
     (input$, initialState) => input$.pipe(...),
     initialState
   )
   Copy

The optional initialState is internally passed to useState(initialState). This means it can be either a state value or a function that returns the state which is for expensive initialization.

The initialState(or its returned result) is also passed to the init function. This is useful if you want to implement reduer pattern which requires an initial state.

⚠ Note: These two ways use different hooks, choose either one each time and do not change to the other one during Component's life cycle.

⚠ Note: useLayoutObservableState will call the epic-like init function only once and always return the same Observable. It is not safe to access closure directly inside init. Use [[useObservable]] with withLatestFrom instead.

⚠ Note: To make it concurrent mode compatible, the subscription happens after the render is committed to the screen which means even the Observable emits synchronous values they will arrive after the first rendering.

Different input output types with initial state.