Atoms are not visible in Redux Devtools if the atom value is not used

[tmatz]

I am using useAtomsDevtools().

If I use useSetAtom() for atom in the react component and do not useAtom() or useAtomValue(), the atom is not displayed in the Redux Devtools.

As a workaround, I was able to display the atom in Redux Devtools by using the store obtained with useStore() and setting store.sub(atom, () => {}).

  const store = useStore();
  useEffect(() => {
    if (process.env.NODE_ENV !== 'production') {
      return store.sub(myAtom, () => {
        // nop
      });
    }
    return undefined;
  }, [store]);

Although useAtomDevtools() will allow you to display with the Redux Devtools, we prefer not to use it because it causes unnecessary re-rendering.

It would be nice if useAtomsDevtools() would also display the atom when useSetAtomValue() is used.

[dai-shi]

This sounds very difficult. If we simply display (add to the list) with useSetAtom, it will be infinite and leak memory. It might be fine in practice, but we pay attention for memory leaks and won't take such approach.

In v2 API, your workaround seems most reasonable for now. If you are using default store (no providers), getDefaultStore should help, and you don't need useEffect (and leaks memory).

[tmatz]

@dai-shi Thank you for your response!

Right now jotai-devtools is using useAtom(), which affects React rendering. I guess this will change to an implementation using the v2 store API.

Also, it would be nice to be able to connect jotai with redux devtools outside of React.

I would like to dig deeper into the source, as I still don't fully understand the possibility of an infinite loop.