Extend atom onMount with getter

[SomeCodingUser]

Hi,

I was wondering if it would be possible to extend the onMount function with a getter? Currently it is only possible to set a value in there, but it would help improve our code base in some instances.

E.g. currently we registered atom effects for several atoms, in order to do so we need to mount the effect in component.
With a getter we could move this to the onMount function like this:

const myValueAtomEffect = atomEffect((get, set) => {
  const myValue= get(myValueAtom);

  // do something...
});  

myValueAtom.onMount((get) => { // <-- added getter
  get(myValueAtomEffect);
}); ```

If this was possible I would love to get my hands dirty on that feature.

Thanks!

[dai-shi]

It's our design choice to only support set in onMount. You should create a new atom. We prefer atom composition.

const countAtom = atom(1)
const anotherCountAtom = atom(2)
const initAtom = atom(null, (get, set) => {
  set(anotherCountAtom, get(countAtom) * 10)
})
initAtom.onMount = (init) => {
  init()
}

[SomeCodingUser]

After thinking about it, is the initAtom.onMount even called if it's not used anywhere else? I assume the onMount function is only called if initAtom is used in a component right?

[dai-shi]

Well, we actually need more composition in practice:

export const anotherCountAtom = atom(2)
const baseCountAtom = atom(1)
const initAtom = atom(null, (get, set) => {
  set(anotherCountAtom, get(countAtom) * 10)
})
initAtom.onMount = (init) => {
  init()
}
export const countAtom = atom(
  (get) => {
    get(initAtom)
    return get(baseCountAtom)
  },
  (get, set, ...args) => set(baseCountAtom, ...args)
)

Something like that. It depends on what you would like to do.

[SomeCodingUser]

Awesome, thanks!

[dmaskasky]

I'm late to the party but the way to do this is with atom composition.

import { atomEffect } from 'jotai-effect'

const myValueBaseAtom = atom(0)

const myValueAtomEffect = atomEffect((get, set) => {
  const myValue= get(myValueBaseAtom)
})

const myValueAtom = atom(
  (get) => { 
    get(myValueAtomEffect)
    return get(myValueBaseAtom)
  },
  (_get, set, value: number) => set(myValueBaseAtom, value)
)

Alternatively, you can just use withAtomEffect, which is equivalent to above.

import { withAtomEffect } from 'jotai-effect'

const myValueAtom = withAtomEffect(atom(0), (get, set) => {
  const myValue= get(myValueAtom)
})