[Recoil] atom の default を設定しないとサスペンドしてハングに至る

2023/09/29に公開

問題

useStateと同じ気分で、下記のように書きました。

export const state = atom<string | undefined>({
  key: "state",
});

(デフォルト値は空だし無くていいだろ)という安直な考えから。

結果、useRecoilValue や useRecoilState を使うとそこでハングして、サーバーからの応答がかえってこなくなった。
ブラウザは CPU使用率 100% に張り付く。

解決

公式docに。
https://recoiljs.org/docs/api-reference/core/atom

If no default is provided, as oppose to a value which could include null or undefined, the atom will start in a "pending" state and trigger Suspense until it is set.

つまり、デフォルトの値が設定されるまで待つよ、と。
なので外部から何らかの形で値を設定するロジックが無いとハングしたような状態になるということだった。

export const state = atom<string | undefined>({
  key: "state",
  default: undefined,
});

公式docを見ずに進めるのは危険ですね。

Discussion