リコイル 0.6 では、新しい API、修正、および最適化とともに、同時レンダリングやトランジションなど、React 18 のサポートが強化されました。
React 18
リコイル 0.6 は、安全性とパフォーマンスの向上のため React 18 から最新の API を使用しています。このリリースは、同時レンダリングに役立てられる <React.StrictMode> と 同時レンダリング と互換性があります。リコイルと React の状態変更を同じバッチで行うことで、状態の一貫したビューが維持されます。これらの機能の一部は、以前のバージョンの React を使用している場合にも利用できます。React 18 を試用する場合は、最初のパッケージとなる `18.0.0-rc.0` には修正済みのバグがあるため、最新の RC ビルドを使用してください。
同時レンダリングとトランジション
React 18 には、新しい状態に移行して、新しい状態の準備が整う前に何をレンダリングするかを制御するための新しいフック useTransition() があります。リコイルはこのアプローチと互換性があり、React の状態と一貫したビューを提供します。ただし、React 18 では同時アップデートからフォールバックされ、外部ストアの状態変更に基づくトランジションの開始はまだ公式にはサポートされていません。React チームはサポートすることを検討していますが、それまでの間当社は次のフックを通じて試験的にサポートを追加してきました。この API は試験的であるため、まだ見つかっていない、想定外のユースケースが存在する場合があります。
useRecoilState_TRANSITION_SUPPORT_UNSTABLE()useRecoilValue_TRANSITION_SUPPORT_UNSTABLE()useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE()
新しい結果をロードしている間、現在の結果を表示する例を次に示します。
function QueryResults() {
const queryParams = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
const results = useRecoilValue_TRANSITION_SUPPORT_UNSTABLE(myQuerySelector(queryParams));
return results;
}
function MyApp() {
const [queryParams, setQueryParams] = useRecoilState_TRANSITION_SUPPORT_UNSTABLE(queryParamsAtom);
const [inTransition, startTransition] = useTransition();
return (
<div>
{inTransition ? <div>[Loading new results...]</div> : ''}
Results: <React.Suspense><QueryResults /></React.Suspense>
<button
onClick={() => {
startTransition(() => {
setQueryParams(...new params...);
});
}
>
Start New Query
</button>
</div>
);
}
新機能
- リカールコールバック
useRecoilCallback()は、useRecoilRefresher_UNSTABLE()と同様に、セレクターキャッシュを更新できるようになりました。（#1413）getCallback()を使用するセレクターからのコールバックは、読み取りに加えて、useRecoilCallback()と同様に、状態の変更、更新、処理を実行できるようになりました。（#1498）
- ストア ID -
StoreIDは、useRecoilStoreID()(#1417) またはアトム効果のstoreIDパラメーター (#1414）を使用して取得できるようになりました。 RecoilLoadable.of()とRecoilLoadable.all()ファクトリで、リテラル値、非同期プロミス、またはロード可能のいずれかを受け入れるようになりました。これはPromise.resolve()とPromise.all()と同等です（#1455、#1442）。- スナップショット用の
.isRetained()メソッドを追加し、開発中に.retain()を使用するときにスナップショットがすでにリリースされているかどうかを確認します。（#1546）
重大な変更
- アトム効果
useGetRecoilValueInfo_UNSTABLE()とSnapshot#getInfo_UNSTABLE()は、常にノードのtypeを報告するようになりました。（#1547）- 0.3 リリースでは、後で使用するためにスナップショットを保持する必要が導入されましたが、ほとんどは警告でした。非同期セレクターを解決するためには、スナップショットを保持する必要があります。ドキュメントを こちら と こちら で確認できます。今後のリリースでは、ガベージコレクションがリリースされるため、さらに強化されます。
その他の修正と最適化
- スナップショットの複製にかかるオーバーヘッドを削減
- 場合によっては推移的セレクターの更新を修正（#1409）
- 非同期セレクターと複数のストアを使用した場合の不具合を修正（#1568）
- アトム効果
- コンポーネントで異なるAtom/セレクタを使用する場合、いくつかのケースで不要な再レンダリングを回避します。（#825）
<RecoilRoot>は、最初のレンダリング中にinitializeState()を1回だけ呼び出します。（#1372）useGetRecoilValueInfo()やSnapshot#getInfo_UNSTABLE()などの遅延プロパティの結果を遅延して計算し、メモ化します。（#1548、#1549）