Is there any plan for a atomValue function that doesn't use promises?

[sebinsua]

Once the experimental use hook in React's docs is officially released could we consider creating an atomValue function that is the same as useAtomValue but which doesn't call use internally?

If the React team add the ability to call use from within useMemo/useCallback this might make Jotai APIs accessible from within these APIs, too. It'd be nice to be able to access Jotai state from anywhere that use can be called (as far as I know, it doesn't have to meet the same rules of hooks that other hooks do).

Note: I can see there is other usage of hook APIs in this function currently so I know it can't happen as simply as I suggest, but I still think it'd be an interesting step forwards to be able to use synchronous and asynchronous Jotai state wherever React can read "context" or "promises".

[dai-shi]

Yes, I can consider about skipping internal use when it comes (it might be for v3.)
(fyi, Valtio v2 will do it so.)

Meanwhile, please use useStore and subscribe to an atom on your end.

const useAtomValueWithoutUse = (atom) => {
  const store = useStore();
  const [value, setValue] = useState(() => store.get(atom));
  useEffect(() => store.sub(atom, setValue), [store, atom]);
  return value;
};

[sebinsua]

Yes, this makes sense. But actually what I was saying is that it'd be ideal if we were able to read from Jotai conditionally with use. In the code above we still wouldn't be able to do this since it's using the hooks useContext, useState and useEffect internally to subscribe and unsubscribe a component to a store with an atom on mount/unmount.

I'm not sure whether there would be a way to do this. I guess we'd need changes by the React team for use to support reading from Jotai as currently it's only able to read from context and promises? Like, even if you could make an atomValue function that returned a Promise that resolved to the correct value we'd have no way to know whether a component was subscribed to Jotai and when it should be re-rendered without the extra hook calls.

[dai-shi]

Oh, were you talking about it?
Of course, I've thought about it, quite a lot.
There are two hurdles:

• React has to support use(Observable) or something alike.
• Yet, React prohibits to combine two use() calls in a non-hook function.

It's very unlikely that both are solved at any time soon. So, consider that we don't have a hope.

[sebinsua]

Sorry, I didn't mean I'd said this in my original description; I meant that I'd misspoke and that this is what I'd meant to say. :)

Thanks for responding. I was wondering whether it'd be possible at all (even with hacks), and didn't even know about the second bullet point.

[sebinsua]

@dai-shi Coming back to this issue, to suggest that even if the exact API we spoke about isn't yet possible, maybe there should be a way to "split your APIs into a hook that fetches during render but doesn't suspend, and a hook that reads and suspends", like within @isographlabs due to React 19 no longer pre-rendering the siblings of suspended components.

[dai-shi]

What's wrong with useStore? #2519 (comment)

due to React 19 no longer pre-rendering the siblings of suspended components.

I'm not sure how it's related.

[dai-shi]

By the way, we have the issue even with React 18 and a workaround is usePrepareAtoms from jotai-suspense.

[dmaskasky]

Alternatively, you could use atomEffect from jotai-effect to cause your fetch side-effects.

import { atom, useAtom } from 'jotai';
import { atomEffect } from 'jotai-effect';

const userDataAtom = atom(null);

const fetchDataEffect = atomEffect((get, set) => {
  const abortController = new AbortController();
  const { signal } = abortController;
  const url = 'https://api.example.com/userdata';

  fetch(url, { signal })
    .then(response => response.json())
    .then(userData => {
      set(userDataAtom, userData);
    })
    .catch(error => {
      if (error.name !== 'AbortError') {
        console.error('Failed to fetch user data:', error);
      }
    });

  // Cleanup function to abort the fetch
  return () => abortController.abort();
});

const userAtom = atom((get) => {
  get(fetchDataEffect);  // registers fetchDataEffect
  return get(userDataAtom);
});

export function UserProfile() {
  const [userData] = useAtom(userAtom);

  if (!userData) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {userData.name}</p>
      <p>Email: {userData.email}</p>
    </div>
  );
}

[iwoplaza]

@sebinsua

Yes, this makes sense. But actually what I was saying is that it'd be ideal if we were able to read from Jotai conditionally with use. In the code above we still wouldn't be able to do this since it's using the hooks useContext, useState and useEffect internally to subscribe and unsubscribe a component to a store with an atom on mount/unmount.

To subscribe to atoms conditionally, I usually do something like this currently.

export const voidAtom = atom(() => undefined, () => {
  // noop
});

// an atom that could potentially cause a lot of rerendering if used unnecessarily.
const screenHeightAtom: Atom<number> = ...;

// later in the components
function SomeComponent({ responsiveToHeight }: Props) {
  // now the components only rerenders once it actually needs to be responsive to the screen's height
  const screenHeight = useAtomValue(responsiveToHeight ? screenHeightAtom : voidAtom);
  
  // do the rendering...
}

[dai-shi]

jotaijs/jotai-suspense#7 adds useAtomValue hook that doesn't resolve promises.