Consuming Subject with useSubscription

[rt4x]

I want to use Subject inside component and want to delay emitted values by it. For some reason async operators like delay is not working without additional hook, could anyone explain why, that would be very helpfull in understanding how useSubscription actually work.

useSubscription(storeAction$, () => console.log(`${new Date().toISOString()} not delayed`));
useSubscription(storeAction$.pipe(delay(3000)), () => console.log(`${new Date().toISOString()} delayed`));
const delayedAction$ = useObservable(() => storeAction$.pipe(delay(3000)));
useSubscription(delayedAction$, () => console.log(`${new Date().toISOString()} delayed 2`));
useSubscription(delayedAction$.pipe(delay(1)), () => console.log(`${new Date().toISOString()} delayed 3`));

Note

storeAction$ is located outside of the component

output:

[crimx]

See https://observable-hooks.js.org/guide/gotchas.html#epic-closure .

You need to place the pipe operation inside the callback function to ensure that a new Observable is not created repeatedly on every render. This is a somewhat counterintuitive design in React.

const delay$ = useObservable(() => storeAction$.pipe(delay(3000));
useSubscription(delay$, () => console.log(`${new Date().toISOString()} delayed`));