Use get(atom) without tracking/subscribing

[Lesik]

It seems like a pretty basic feature/pattern, but I really can't find anything about this online, not even people requesting this feature. Does this pattern fundamentally against Jotai's principles and I'm not seeing it?

Anyway, I'm talking about being able to peek into an atom's value without subscribing to changes in that atom. Similar to how Preact Signals do it.

For example, you might have an atom holding an access token. When that access token is updated, you don't want to re-evaluate every single atom that uses this access token! You just want the next time an atom is evaluated to read this new token, but not subscribe to the token.

const accessTokenAtom = useAtom(
  DEFAULT_ACCESS_TOKEN,
  (_get, set, newAccessToken) => set(accessTokenAtom, newAccessToken)
);

const shoppingCart = atomWithRefresh((get) => fetch("/cart", {
  headers: {
    "X-Access-Token": get(accessTokenAtom),
  },
}).json()); // let's assume fetch is synchronous for simplicity

Now when somebody updates accessTokenAtom, shoppingCart will be re-fetched unnecessarily.

I know that the write function (I'm referring to the second argument of atom()) can get values with get() without subscribing, but that's in the write function, which has to be manually triggered. I'm interested in the read function, as that one is auto-evaluated.

[dai-shi]

Does this pattern fundamentally against Jotai's principles and I'm not seeing it?

Yeah, I think so. It's against declarative data flow model.
You can't do such things with useState either.

You just want the next time an atom is evaluated to read this new token, but not subscribe to the token.

Well, then theoretically you don't need to store the token in atoms.

// naive code
let accessToken;
const const shoppingCart = atomWithRefresh((get) => fetch("/cart", {
  headers: {
    "X-Access-Token": get(accessToken),
  },
}).json());

Similar to how Preact Signals do it.

What you could do in Jotai is to use store API.
Again, it's not recommended for the first reason, but it's an escape hatch if your case really requires it.

[Lesik]

Thanks for the quick response!

If I'm not mistaken, you can achieve this behavior with useState if you simply don't specify the variable in question in the dependency array:

const [accessToken, setAccessToken] = useState(DEFAULT_ACCESS_TOKEN);

useCallback(() => fetch("/cart", {
  headers: {
    "X-Access-Token": accessToken,
  },
}), [
/* do not specify accessToken as a dependency */
//accessToken
]);

But I get that Jotai's whole thing is getting rid of the dependency arrays and subscribing to things automatically. I just thought it would be useful to have an escape hatch, similar to peek() in Preact Signals.

For my use case, it's a good suggestion of you to have accessToken just be a regular variable and not an atom, thanks. I'm just thinking what if you would want accessToken to be a reactive value in most cases (so you want to keep it as an atom), but just in one special case you only want to peek without subscribing. But that's a fictional use case, so I'll close this as resolved 🙂

What you could do in Jotai is to use store API.

Are you talking about this API? If so, I'm not really seeing yet how this could be used as an escape hatch for this. Since I'd like to learn more about Jotai, would you mind elaborating or linking to somewhere where I can read about it?

[himself65]

I'm also implementing user authentication using jotai.

I think useState is not a good approach because the login token is saved in the localStorage, which is out of React lifecycle.

In my experience, I move the token out of the atom and use store API to manually control the behavior.
For example: https://github.com/toeverything/AFFiNE/blob/1ca9fb8ff4a7470ecb470f9a09cdbece78a4288f/apps/web/src/plugins/affine/index.tsx#L103-L110.

Another approach is to use rjxs, which could support customized event listener, I didn't really code this but the same idea you can see https://github.com/Himself65/affine-minimum/blob/b5aca5005af7944849d49f800b3a995b97132857/src/store.ts#L95-L107

[dai-shi]

I didn't mean to use useState for this case. It's just that you can never "peek" useState value and Jotai atoms are modeled after useState.

[dai-shi]

Are you talking about this API? If so, I'm not really seeing yet how this could be used as an escape hatch for this. Since I'd like to learn more about Jotai, would you mind elaborating or linking to somewhere where I can read about it?

Usually, a store is created automatically, but you can explicitly create it on your own.

import { createStore, Provider, atom, useAtom } from 'jotai'

const countAtom = atom(0)
const myStore = createStore()

const App = () => <Provider store={myStore}><Counter /></Provider>

// You can use it as usual
const Counter = () => {
  const [count, setCount] = useAtom(countAtom)
  // ...
}

// You can use the store as an escape hatch
console.log(store.get(countAtom)) // This is not reactive

Usually, <Provider> and useStore would be better, but the above code should show the idea more clearly.

[chikunov]

I think there is a valid use-case where this is useful: if I want to have the latest value in my callbacks, but don't want to re-render component on every change.

const useGetAtomValue = (atom) => {
   const store = useStore();
   return useCallback(() => store.get(atom)), [store]);
}

const getName = useGetAtomValue(nameAtom);

const doSomeProcessing = useCallback((lastName) => {
   return getName() + lastName;
}, [getName]);

doSomeProcessing is stable here and getting the value doesn't involve any re-renders. In contrast to

const name = useAtomValue(nameAtom);

const doSomeProcessing = useCallback((lastName) => {
   return name + lastName;
}, [name]);

[dai-shi]

if I want to have the latest value in my callbacks

The canonical solution would be write-only atom or useAtomCallback.

You may also find this interesting: https://github.com/jotaijs/jotai-game

[dmaskasky]

I might be late, but jotai-effect's atomEffect supports peek.

[boar-is]

Thank you! This is exactly what I need!