Effect CommunityEC
Effect Community•2mo ago•
15 replies
harrysolovay

Inline Atom Effect Handling in Button onClick

I noticed that I'm creating a lot of atom fns just to run effects that utilize other atoms. For example, the following incrementAtom.

const count = Atom.make(0)

const incrementAtom = runtime.fn<void>()(Effect.fn(function*(_, get) {
  get.set(count, get(count) + 1)
}))

const MyComponent = () => {
  const increment = useAtomSet(incrementAtom)

  return <Button onClick={() => increment()}>Increment</Button>
}


I understand the aim is probably to have a stable reference... but if possible, I'd love to keep this logic unnamed and inside of the Button onClick handler.

Wondering if the following DX idea is tenable and/or desirable...

const count = Atom.make(0)

const MyComponent = () => {
  const run = runtime.useRun() // or just Atom.useRun
  const get = Atom.useGet()

  return (
    <Button
      onClick={() =>
        run(Effect.gen(function*() {
          get.set(count, get(count) + 1)
        }))}
    >
      Increment
    </Button>
  )
}
Was this page helpful?