Recoil Async Selector does not work with Next.js

[Yuya-Furusawa]

Hi everyone,

I tried to use recoil selector which includes async functions in my Next.js project.

However, the page keeps displaying a fallback and does not render Component. Recoil Async Selector does not return values even when async function is finished.

Sample Code below:

// page.tsx

"use client"
import * as React from "react"
import { RecoilRoot, useRecoilValue } from "recoil"
import { textToDisplay } from "./recoil"

export default function Home() {
  return (
    <RecoilRoot>
      <React.Suspense fallback={<p>Loading...</p>}>
        <SomeComponent />
      </React.Suspense>
    </RecoilRoot>
  )
}

const SomeComponent: React.FC = () => {
  const text = useRecoilValue(textToDisplay);

  return (
    <h1>{text}</h1>
  )
}

// recoil.ts

import { atom, selector } from "recoil";

export const textState = atom<string>({
    key: "TEXT_ATOM_KEY",
    default: "atom",
})

export const textToDisplay = selector({
    key: "TEXT_SELECTOR_KEY",
    get: async ({ get }) => {
        await new Promise(resolve => setTimeout(resolve, 1000));
        const text = get(textState);
        return text + " selector";
    }
})

CodeSandbox is here: https://codesandbox.io/p/sandbox/cool-mopsa-t3zmx9
(if the problem is not reproducible, click "Restart Task" in "Start Dev Server". You can see the loading does not finish.)

Would appreciate any ideas about it, thank you.

[hoanggia7398]

I have the same issue

[ml-vines]

im having exact the same issue.. i saw the version 0.77 it was fixed but was not

[clockk]

hi
Sorry for the late reply, you may have already found a good solution,
but I recommend you make the following modification:

"use client";
import * as React from "react";
import dynamic from "next/dynamic";
import { RecoilRoot, useRecoilValue } from "recoil";
import { textToDisplay } from "./recoil";

const SomeComponent = dynamic(() => import("./SomeComponent"), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

export default function Home() {
  return (
    <RecoilRoot>
      <SomeComponent />
    </RecoilRoot>
  );
}