Is it possible to read an atom's current state without using useAtom?

[tushar-upadhyay]

Suppose i am storing some authentication state of a user in an atom and i want to call an API with that state. So how can i do that outside the functional component?

[znk]

Quotting from #13, whether it's not possible or not covered by this library:

Jotai state is within React component tree.

If you want to update state outside React, zustand works better.

[lishine]

But what about atom.read, atom.write ?

[dai-shi]

But about atom.read, atom.write ?

They are just definitions, so you can't call them.

whether it's not possible or not covered by this library

Correct. Just think it like the normal React.useState().

So, here's the workaround:

const Component = () => {
  const authStateRef = useRef()
  const authState = useAtom(authAtom) // or useState(...)
  useEffect(() => {
    authStateRef.current = authState
  })
  return (
    <Child authStateRef={authStateRef} />
  )
  // or, use Context to pass authStateRef.
}

So how can i do that outside the functional component?

Ah, outside component... I missed that, so it's like this:

let globalAuthState
const Component = () => {
  const authState = useAtom(authAtom) // or useState(...)
  useEffect(() => {
    globalAuthState = authState
  })
  return ...
}

But, as you may notice, this naive pattern doesn't seem like good practice.
The point is that useEffect is the method to connect React world and outside world.

[tushar-upadhyay]

So that mean, we cannot seperate buisness logic with the component right?

[dai-shi]

You could make a custom hook, but it depends on React. If that's what you mean, that's correct.

[lxsmnsyc]

If you want a jotai-like decoupling from React, you might want to read this article: https://bennetthardwick.com/blog/recoil-js-clone-from-scratch-in-100-lines/

[dai-shi]

While I was ideating the persistence pattern #4 (comment), I came up with this idea.

const callbackAtom = atom(null, (get, set, action) => {
  action.callback(get(action.atom))
})

  const [, getAtom] = useAtom(callbackAtom)
  getAtom({
    atom: anAtom,
    callback: (value) => { console.log(value) /* or whatever */ },
  })

It will only allow to read committed state, so it's essentially the same as:

  useEffect(() => {
    globalAuthState = authState
  })

in #60 (comment).

Just found https://recoiljs.org/docs/api-reference/core/useRecoilCallback is a bit similar, or not.

---

@tushar-upadhyay Would you tell us your use case? Maybe we can create a custom atom and/or custom hook.

[x4080]

@dai-shi

I use below in recoil

const saveForm = useRecoilCallback(({snapshot}) => () => {
        theValues = snapshot.getLoadable(atomForm).contents
        ...

I'm using recoil for form state, the listener is inside the components inside the form component, and in this save form function, I can get the value of the form state without needed to listen for form state all the time in the form component - it makes a lot of different in my case

Can we got something like this ?

Thanks

[dai-shi]

@x4080
Hi, I'm still not sure what useRecoilCallback exactly does, so correct me if I'm wrong.

Here's what I come up with for your use case.

const saveFormAtom = atom(null, (get, set, [args, callback]) => {
  // get, set...
  const result = ...
  callback(result)
})

const [, doSaveForm] = useAtom(saveFormAtom)
const saveForm = (args) => new Promise((resolve) => {
  doSaveForm([args, resolve])
})

  const result = await saveForm(...)

[x4080]

@dai-shi Thanks again, the useRecoilCallback create a function that can get the latest value of the atom, without having to userecoil listener, the benefit is theres no rerender at all to get the value

Sorry if im not clear, if we can get the value stored by jotai without actively listening to it (listener is in other component) then it will be perfect