The prev value passed to the unwrap fallback is still undefined after the async atom resolves.

[3846masa]

Bug Description

In v2.9.3, if an unwrap atom is called after an async atom resolves, the unwrap atom will not fallback.
This is the expected behavior.

In v2.10.0, after the async atom resolves, the unwrap atom's fallback is executed and undefined is passed as the prev value.

Reproduction code

import { atom, createStore } from "jotai/vanilla";
import { unwrap } from "jotai/vanilla/utils";

async function main() {
  const promiseAtom = atom(Promise.resolve("Hello Jotai"));

  const unwrappedAtom = unwrap(promiseAtom, (prev) => {
    console.log("fallback was called:", prev);
    if (prev == null) {
      throw new Error("promiseAtom is not initialized.");
    }
    return prev;
  });

  const store = createStore();

  await store.get(promiseAtom);

  document.body.append(store.get(unwrappedAtom));
}

main();

• v2.9.3: https://codesandbox.io/p/sandbox/rp55pz
• v2.10.0: https://codesandbox.io/p/sandbox/festive-curran-forked-gh8nnz

Reproduction Link

https://codesandbox.io/p/sandbox/festive-curran-forked-gh8nnz

[dai-shi]

Thanks for reporting. I wasn't exactly aware this behavioral change. 🤦‍♂️

This can probably be an intentional change in #2695.
We no longer use PromiseMeta.
https://github.com/pmndrs/jotai/pull/2695/files#diff-4b04137532bd8eaa436c02ba16ca8caf711b25eefeb9c379393d8503cb4658aaL12-L15

In v2.9.3, if an unwrap atom is called after an async atom resolves, the unwrap atom will not fallback.

If you remove await store.get(promiseAtom);, does it call the fallback function even in 2.9.3?

[dai-shi]

Is it like waiting the promiseAtom higher in the component tree, and once resolved, rendering a child component which uses the unwrappedAtom? 🤔

[3846masa]

Yes, that is correct.

As in the following mock code, we want to wait in the upper component and then take values synchronously in the child component.

const featureFlagClientAtom = atom(async (userAtom) => {
  // When user changes, we need to reinitialize the client.
  const user = await get(userAtom);
  const client = new FeatureFlagClient(user);
  await client.initialize();
  return client;
});

const unwrappedFeatureFlagClientAtom = unwrap(featureFlagClientAtom, (prev) => {
  if (prev == null) {
    // FallbackFeatureFlagClient always returns false for all flags.
    return new FallbackFeatureFlagClient();
  }
  return prev;
});

const isEnabledFeatureAtom = atom((get) => {
  return get(unwrappedFeatureFlagClientAtom).getBooleanFlag('new-feature');
});

const App = () => {
  return (
    <Suspense fallback={<Loading />}>
      <AppInitializer>
        <Content />
      </AppInitializer>
    </Suspense>
  );
};

const AppInitializer = ({ children }) => {
  useAtom(featureFlagClientAtom);
  return children;
}

const Content = () => {
  // If the unwrap atom has returned a fallback value the first time, the old feature is rendered once with all feature flags.
  const isEnabledFeature = useAtomValue(isEnabledFeatureAtom);
  return isEnabledFeature ? <NewFeature /> : <OldFeature />;
}

[dai-shi]

One workaround: Can you add store.get(unwrappedAtom) before await store.get(promiseAtom)? You need to remove the throw statement in this case.

[dai-shi]

const internalFeatureFlagClientAtom = atom(async (get) => {
  // When user changes, we need to reinitialize the client.
  const user = await get(userAtom);
  const client = new FeatureFlagClient(user);
  await client.initialize();
  return client;
});

const unwrappedFeatureFlagClientAtom = unwrap(internalFeatureFlagClientAtom, (prev) => {
  return prev;
});

const featureFlagClientAtom = atom((get) => {
  get(unwrappedFeatureFlagClientAtom);
  return get(internalFeatureFlagClientAtom);
});

// ...

[dai-shi]

Or, this would be simpler:

  const AppInitializer = ({ children }) => {
+   useAtom(unwrappedFeatureFlagClientAtom); // without throw...
    useAtom(featureFlagClientAtom);
    return children;
  }

[dai-shi]

Thinking about it more, why do you need unwrap in the first place?

const isEnabledFeatureAtom = atom(async (get) => {
  return (await get(featureFlagClientAtom)).getBooleanFlag('new-feature');
});

[3846masa]

Thinking about it more, why do you need unwrap in the first place?

In our code, Jotai is not only on React, but we have code that directly references Store.
Indeed, if it were only on React, there would be no need to take values synchronously because of Suspense.

One workaround: Can you add store.get(unwrappedAtom) before await store.get(promiseAtom)? You need to remove the throw statement in this case.

I think it is possible.

The method of calling unwrap atom in AppInitializer seems to be easy to forget to implement, so the method of creating internalAtom seems to be better.

[dai-shi]

Hope the workaround would work.

but we have code that directly references Store.

In this case (= without React), the screen flicker is not a concern, so the problem is just a tick returning a fallback value (= undefined). It might be a problem, but seems rare. I believe, most cases can await.

That said, I understand this feels like a regression in your case. 🙇