Asynchronous initial state with synchronous default?

[dqii]

I'd like to set an initial state to a value from my server. If there's an error, I'd like the value to be [].

const todoList = atom({
  key: 'todoList',
  default: await get_data().catch(err => []),
});

But I'd also like the value to be [] until the promise resolves. The docs mention that I can use React Suspense to handle pending data. So I suppose I could do something like

const TodoList = ({items}) => <div>{items.map(item => item)}</div>

<React.Suspense fallback={<TodoList items={[]} />}>
<TodoList items={todoList} />
</React.Suspense>

But I was wondering if there was any other way to do this outside the component? Maybe inside the atom itself?

[drarmstr]

Yes, if you initialize atom state with Atom Effects you can either initialize with a promise so it starts in a pending state, or you can use this pattern to have it start with the default value and when the data is asynchronously ready then update the atom value.