Tips and best practices using useObservable, rxjs with recoil?

[ShravanSunder]

Hi! I was wondering if anyone has any ideas for best practices to Recoil with RxJs and observable hooks? I'm trying to see how I can RxJs with react while using recoil as a state.

• The issues i ran into since recoil is immutable you can't store any observables in them
• The other issue is creating an observable from a state from recoil seems to create longer update cycles, perhaps i'm using it wrong.

I created the following hooks to create observables from recoil atoms.

export const useSubjectFromRecoil = <T>(atom: RecoilValueReadOnly<RecoilSubject<T>>): SubjectWithValue<T> => {
   const recoilState = useRecoilValue(atom);
   const subject$ = recoilState.getSubject();
   // const subject$ = useObservable((input$: Observable<[T]>) => input$.pipe(map(([value]) => value)), [recoilState]) as BehaviorSubject<T>;

   return { subject$, next: recoilState.next };
};

export const useSubjectTransformRecoil = <T>(
   atom: RecoilValueReadOnly<RecoilSubject<T>>,
   operator: TTransform<T>,
   ...otherObservables$: Observable<any>[]
): SubjectWithTransform<T> => {
   const recoilState = useRecoilValue(atom);

   // todo: it doens't make sense to send this to the recoil state
   const subject$ = useObservable(() => operator(recoilState.getSubject(), ...otherObservables$)) as BehaviorSubject<T>;
   // const value = useObservableState(subject$, recoilState);

   return { subject$, next: recoilState.next, source$: recoilState.getSubject() };
};

it seems to be causing multiple triggers when i use it. In addition, the cycle time is causes strange intermittent states during updates.

[jkhaui]

Hey, did you ever find out how to do this properly?

I'm not using Recoil, but I have noticed a similar issue when trying to use observable-hooks + BehaviorSubject as a form of state management. I think the issue may be that calling next can trigger too many emissions, which causes components to update too frequently.

One potential way to mitigate this is to add distinctUntilChanged to every pipe (with a custom equality check for nested objects), but there must be a better solution...

[crimx]

Sorry I am new to recoil. What should the role of RxJS be in a recoil app?