useLazyAtom hook?

[himself65]

implementation here: https://stackblitz.com/edit/vitejs-vite-xo4rji?file=src%2FApp.jsx

import { useEffect, useState } from 'react';
import './App.css';
import { atom, useStore, getDefaultStore } from 'jotai';

const messageAtom = atom(0);

function useLazyLoad(atom) {
  const store = useStore();
  const [called, setCalled] = useState(false);
  const [, setCounter] = useState(0);
  useEffect(() => {
    if (called) {
      return store.sub(atom, () => {
        setCounter((c) => c + 1);
      });
    }
  }, [called]);

  return {
    get 0() {
      if (!called) {
        setCalled(true);
      }
      return store.get(atom);
    },
    [Symbol.iterator]: function* () {
      if (!called) {
        setCalled(true);
      }
      yield store.get(atom);
    },
  };
}

setInterval(() => {
  getDefaultStore().set(messageAtom, (c) => c + 1);
}, 1000);

function App() {
  const [c] = useLazyLoad(messageAtom);
  console.log('rerender');
  return (
    <>
      <div className="card">
        <span>count is {c}</span>
      </div>
    </>
  );
}

The reason I use this hook is because I have a user side API which might directly or indirect includes many atoms, and the API intended to be used anywhere

function useChat() {
  const [message] = useAtom(messageAtom)
  const [isLoading] = useAtom(isLoadingAtom)
 // many other atoms
}

const { messages } = useChat() // used in MessageList
const { isLoading } = useChat() // used in Skeleton

with the lazy load hook, it will be

function useChat() {
  const obj1 = useLazyLoadAtom(messageAtom)
  const obj2 = useLazyLoadAtom(isLoadingAtom)
  return {
    get message() {
      return obj1[0]
    },
    get isLoading() {
      return obj2[0]
    },
    // ...
  }
}

This would improve the re-render performance

[dai-shi]

Maybe it's worth a third-party library in https://github.com/jotaijs.

One caveat is the suggested implementation might not work well with concurrency and/or suspense.

[himself65]

I just released the jotai-lazy, it inherits from the original hook but add some small changes