use-rx-init-demo

suspensify.js

import React, { memo, Suspense, useMemo } from 'react';
import { useRxInit, suspensify } from '@/utils';
import { of, from, Observable } from 'rxjs';

let r = (n, ms) =>
  new Promise(resolve => {
    setTimeout(() => resolve(n), ms);
  });
let Loading = () => <span>loading...</span>;
let SayHello = memo(({ ctx }) => {
  let b = typeof ctx.b === 'function' ? ctx.b() : ctx.b;
  return (
    <p>
      hello, {ctx.a()} and {b}
    </p>
  );
});
let Page = memo(() => {
  console.log('render');
  let ctx = useRxInit(() => {
    let a = suspensify(from(r(1, 1000)) as Observable<number>);
    return {
      a,
      b: of(2),
    };
  });
  console.log('ab', Date.now(), ctx);
  ctx.a;

  let ctx2 = useRxInit(() => {
    let a = suspensify(from(r(2, 2000)) as Observable<number>);
    let b = suspensify(from(r(3, 3000)) as Observable<number>);
    return { a, b };
  });

  return (
    <>
      <Suspense fallback={<Loading />}>
        <SayHello ctx={ctx} />
      </Suspense>
      <Suspense fallback={<Loading />}>
        <SayHello ctx={ctx2} />
      </Suspense>
    </>
  );
});
export default Page;