breaking(utils): predictable atomWithDefault

[dai-shi]

Related Issues or Discussions

Fixes #1937

Summary

As it turns out, the conversion of atomWithDefault from jotai v1 to jotai v2 wasn't very ideal. It's unnecessary complex and the behavior isn't very predictable.

This fixes it. However, it comes with breaking change.

Migration guide

// suppose we have this
const asyncAtom = atom(() => Promise.resolve(1))
const countAtom = atomWithDefault((get) => get(asyncAtom))
// and in component
const setCount = useSetAtom(countAtom)

// previously,
setCount((c) => c + 1) // it worked, but it will no longer work

// instead, you need to do this
setCount((countPromise) => countPromise.then((c) => c + 1))

Check List

• yarn run prettier for formatting code and docs

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
jotai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 3, 2023 3:11pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a206800:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
Next.js with custom Babel config	Configuration
React with custom Babel config	Configuration
With jotai 2 (forked)	Issue #1937

[github-actions]

Size Change: -147 B (0%)

Total Size: 66.2 kB

Filename	Size	Change
dist/system/vanilla/utils.development.js	4.41 kB	-42 B (-1%)
dist/system/vanilla/utils.production.js	2.7 kB	-20 B (-1%)
dist/umd/vanilla/utils.development.js	5.14 kB	-39 B (-1%)
dist/umd/vanilla/utils.production.js	3.17 kB	-9 B (0%)
dist/vanilla/utils.js	5.01 kB	-37 B (-1%)

ℹ️ View Unchanged

Filename	Size
dist/babel/plugin-debug-label.js	916 B
dist/babel/plugin-react-refresh.js	1.15 kB
dist/babel/preset.js	1.39 kB
dist/index.js	229 B
dist/react.js	1.05 kB
dist/react/utils.js	1.23 kB
dist/system/babel/plugin-debug-label.development.js	1.09 kB
dist/system/babel/plugin-debug-label.production.js	764 B
dist/system/babel/plugin-react-refresh.development.js	1.29 kB
dist/system/babel/plugin-react-refresh.production.js	935 B
dist/system/babel/preset.development.js	1.57 kB
dist/system/babel/preset.production.js	1.14 kB
dist/system/index.development.js	236 B
dist/system/index.production.js	167 B
dist/system/react.development.js	1.17 kB
dist/system/react.production.js	701 B
dist/system/react/utils.development.js	677 B
dist/system/react/utils.production.js	424 B
dist/system/utils.development.js	241 B
dist/system/utils.production.js	175 B
dist/system/vanilla.development.js	3.56 kB
dist/system/vanilla.production.js	1.91 kB
dist/umd/babel/plugin-debug-label.development.js	1.07 kB
dist/umd/babel/plugin-debug-label.production.js	850 B
dist/umd/babel/plugin-react-refresh.development.js	1.29 kB
dist/umd/babel/plugin-react-refresh.production.js	1.02 kB
dist/umd/babel/preset.development.js	1.53 kB
dist/umd/babel/preset.production.js	1.25 kB
dist/umd/index.development.js	371 B
dist/umd/index.production.js	321 B
dist/umd/react.development.js	1.18 kB
dist/umd/react.production.js	785 B
dist/umd/react/utils.development.js	1.4 kB
dist/umd/react/utils.production.js	1.01 kB
dist/umd/utils.development.js	386 B
dist/umd/utils.production.js	334 B
dist/umd/vanilla.development.js	4.34 kB
dist/umd/vanilla.production.js	2.11 kB
dist/utils.js	236 B
dist/vanilla.js	4.25 kB

_{compressed-size-action}

[rikisamurai]

I encountered some confusion regarding a breaking change while upgrading from version 2.1.x. Does this imply that if atomWithDefault is initially asynchronous, it will remain asynchronous consistently?

I find the ability of atomWithDefault to transition from asynchronous to synchronous quite impressive. However, the current behavior seems weird:

const asyncAtom = atomWithDefault(async () => {
  await sleep(1000);
  return "async";
});

const setAsyncAtom = atom(null, async (get, set) => {
  await sleep(1000);
  set(asyncAtom, Promise.resolve("update"));
});

here is codesandbox: https://codesandbox.io/p/sandbox/async-atom-and-update-hdp67v?file=%2Fsrc%2FApp.tsx%3A9%2C4

before this change, i could write in this way:

const asyncAtom = atomWithDefault(async () => {
  await sleep(1000);
  return "async";
});

const setAsyncAtom = atom(null, async (get, set) => {
  await sleep(1000);
  set(asyncAtom, "update");
});

Did i do something wrong?

[dai-shi]

Does this imply that if atomWithDefault is initially asynchronous, it will remain asynchronous consistently?

Yes, and it's how Jotai v2 is designed for all async atoms, not specific only for atomWithDefault. And, unwrap is a solution to convert an async atom to sync atom.
You can even use unwrap conditionally. https://fosstodon.org/@daishi/111379830300795523

Though, I think you can set a non-promise value.

const anAtom = atomWithDefault<Promise<number> | number>(() => Promise.resolve(1));
  const set = useSetAtom(anAtom);
  set(2);

I haven't looked your codesandbox, but is it a type only issue?

[rikisamurai]

Does this imply that if atomWithDefault is initially asynchronous, it will remain asynchronous consistently?

Yes, and it's how Jotai v2 is designed for all async atoms, not specific only for atomWithDefault. And, unwrap is a solution to convert an async atom to sync atom. You can even use unwrap conditionally. https://fosstodon.org/@daishi/111379830300795523

Though, I think you can set a non-promise value.

const anAtom = atomWithDefault<Promise<number> | number>(() => Promise.resolve(1));
  const set = useSetAtom(anAtom);
  set(2);

I haven't looked your codesandbox, but is it a type only issue?

Yes, i can write like this set(asyncAtom, "update"); , but it will emit a typescript error. Is this a type issue that needs to be fixed?

[dai-shi]

https://tsplay.dev/wjlZlm

I don't see any type errors. Please make a reproduction with modifying the typescript playground and open a new discussion.

[rikisamurai]

https://tsplay.dev/wjlZlm

I don't see any type errors. Please make a reproduction with modifying the typescript playground and open a new discussion.

Thank you for your response! Now I understand that I can solve this problem using TypeScript generics.
Before this pr:

const asyncAtom = atomWithDefault(async () => {
  await sleep(1000);
  return 'async';
});

const setSyncAtom = atom(null, async (_, set) => {
  await sleep(1000);
  set(asyncAtom, 'update');
});

Now i should add generics for compatiblity

const asyncAtom = atomWithDefault<<Promise<string> | string>>(async () => {
  await sleep(1000);
  return 'async';
});

const setSyncAtom = atom(null, async (_, set) => {
  await sleep(1000);
  set(asyncAtom, 'update');
});

🙏