Exploring Effect + React for Atomic UI Data Fetching

const MyFancyComponentLoader = () => <AtomicUI effect={MyFancyComponentLoader.effect} />

MyFancyComponentLoader.effect = Effect.gen(function*() {
  yield* UI.render(<MyFancyLoadingSkeleton />)
  const data = yield* fetchedData
  yield* UI.render(<MyFancyComponent data={data} />)
})

export function App(){
  return (
    <Layout>
      <h1>Stuff!</h1>
      <MyFancyComponentLoader />
    </Layout>
  )
}

const MyFancyComponentLoader = () => <AtomicUI effect={MyFancyComponentLoader.effect} />

MyFancyComponentLoader.effect = Effect.gen(function*() {
  yield* UI.render(<MyFancyLoadingSkeleton />)
  const data = yield* fetchedData
  yield* UI.render(<MyFancyComponent data={data} />)
})

export function App(){
  return (
    <Layout>
      <h1>Stuff!</h1>
      <MyFancyComponentLoader />
    </Layout>
  )
}