Making an atomFamily loadable in a safe way

[hemm1]

Hello! My team and me are just starting to migrate to Jotai from Recoil on all our applications. We really like the simplicity so far!

Today, we came across an issue: We have an atomFamily(in Jotai) which we sometimes want to use without suspending. We can use loadable for this, but we cannot figure out a good way to wrap an atomFamily with loadable without doing it directly in the react render code. We noticed that the documentation never seems to use loadable in the render code. Is there any downsides to doing that?

To be clear, we want to this: const fuelPriceLoadable = useAtomValue(loadable(fuelPriceForType(fossilFuelType)));

[dai-shi]

No, there're no downsides.

documentation never seems to use loadable in the render code

Good point. We basically recommend using utils such as loadable outside render if possible. We should probably improve the doc about it.

In your case, it's not possible because fossilFuelType comes from props presumably.
Using loadable in render is supported through adding util-level caching.
For anyone interested, check out the code:

jotai/src/vanilla/utils/loadable.ts

Lines 4 to 6 in 9b83585

	const cache1 = new WeakMap()
	const memo1 = <T>(create: () => T, dep1: object): T =>
	(cache1.has(dep1) ? cache1 : cache1.set(dep1, create())).get(dep1)

[hemm1]

Thank you very much for you quick and helpful reply 🙏 😄