[Question] use with concurrent mode

I try to use jotai as a concurrent-mode library but I failed to produce the result I want as I’m following https://reactjs.org/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state

Expected:

When I type in the input, the result is updated with staled data of searchResultAtom because I’m updating it inside a startTransition.

Actual

The App goes into the full-suspended state and displays the fallback. isPending never becomes true.

How can I use jotai with concurrent mode correctly?

import React, { useState, unstable_useTransition } from 'react';
import { useAtom, atom } from 'jotai';

const searchingAtom = atom('');
const searchResultAtom = atom(async (get) => {
  const count = get(searchingAtom);
  // simulate API delay
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return count;
});

function App() {
  const [searchingWord, setSearchSuspense] = useAtom(searchingAtom);
  const [searchWord, setSearch] = useState(searchingWord);
  const [result] = useAtom(searchResultAtom);
  const [startTransition, isPending] = unstable_useTransition();
  return (
    <div className="App">
      <header className="App-header">
        <input
          type="text"
          value={searchWord}
          onInput={(e) => {
            setSearch(e.currentTarget.value);
            startTransition(() => {
              setSearchSuspense(e.currentTarget.value);
            });
          }}
        />
        <br />
        <span style={isPending ? { color: 'gray' } : undefined}>{result}</span>
      </header>
    </div>
  );
}

export default function () {
  return (
    <React.Suspense fallback="Loading...">
      <App />
    </React.Suspense>
  );
}

[dai-shi]

Oh, I thought this library is concurrent-mode-ready…

Well, it’s hard to define what is CM-ready. Anyway, @Jack-Works this is nice catch. I will investigate it further. Thanks for the codesandbox too.

As @Thisen noted, we don’t run our tests in the experimental build, so in one aspect it’s not yet supported. We do support <Suspense> in Legacy Mode. (But, note it’s technically unstable.) One the other hand, I run some experiments with https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-mode, and isPending seems to work fine for sync atoms. So, the issue is the async atom usage in Concurrent Mode. I’d say it’s something between a bug and a feature request.

I would like to find a proper usage, and possibly fix it. However, note that I don’t think this is blocking v1 release anyway. For example, if we fix it now, it may not work in the future version of React.

I’ll revisit the “contracts” and check the implementation. If anyone noticed anything, it would be good to share here.

[dai-shi]

Let me close this for now and revisit it once React releases a new version.

jotai v1 won’t support CM officially, but it should work. And to my knowledge, the current behavior is correct (or best effort) at the moment.