RxJS + React Hooks

example.tsx

import { Model, when } from '@whenjs/when';
import { scan } from 'rxjs/operators';

import { useState } from 'react';
import { useObservable } from '../src/when-react/use-helpers';

class ViewModel extends Model {
  public foo: number;

  constructor() {
    super();
    this.propertyShouldNotify('foo');

    this.foo = 0;
  }
}

function Example() {
  const [vm] = useState(new ViewModel());

  const obs = when(vm, x => x.foo).pipe(scan(acc => acc * 2, 1));
  const num = useObservable(obs, 0, vm);

  return (
    <div>
      <p>You clicked 2^{num} times</p>
      <button onClick={() => (vm.foo += 1)}>Click me</button>
    </div>
  );
}

export default () => {
  const [clicked, setClick] = useState(false);

  if (clicked) {
    return <div>deaded.</div>;
  }

  return (
    <div>
      <Example />

      <button onClick={() => setClick(true)}>unmount</button>
    </div>
  );
};

use-helpers.ts

import { useEffect, useState } from 'react';
import { Observable } from 'rxjs';

function findObservableSourceViaShadyTrickz<T>(target: Observable<T>): any {
  let ret: any = target;
  while (ret.source) {
    ret = ret.source;
  }

  return ret;
}

export function useObservable<T>(
  target: Observable<T>,
  initial: T,
  source: any = null
) {
  const [ret, setter] = useState(initial);
  const src = source || findObservableSourceViaShadyTrickz(target);

  useEffect(
    () => {
      const sub = target.subscribe(setter);
      return sub.unsubscribe.bind(sub);
    },
    [src]
  );

  return ret;
}