React向けの型安全なURLステートマネージャーであるNuqsは、最近のリリースにおいて一連の新機能を発表した。これにより、デバウンスされたURL更新、標準化されたスキーマの相互運用性、詳細な再レンダリング制御、実験的なルーター統合といった、長らく待望されていた機能が提供されることになった。
際立った機能は、URL更新に対するデバウンスサポートである。これまで、NuqsはthrottleMs属性を通じて履歴API呼び出しのレート制限をし、これにより検索入力などの迅速な入力変更時に過剰なリクエストが発生する可能性があった。新たに追加されたlimitUrlUpdates属性は、従来のthrottleMsオプションに代わるもので、デバウンスを受け入れる。
const [search, setSearch] = useQueryState('search', { defaultValue: '', shallow: false, limitUrlUpdates: debounce(250) }); 従来のthrottleMsオプションは廃止され、統合されたlimitUrlUpdates戦略が推奨されることになった。この新しい戦略では、スロットリングとデバウンスの両方のモードが利用可能である。
標準スキーマの生成は、バージョン2.5から可能となった。Nuqsは、検索パラメータの定義からバリデーションやパーサースキーマを導出できるようになり、tRPCやルートスキーマなどのツールとの統合が可能となった。
キーの分離により、細かなサブスクリプションを通じてパフォーマンスの向上が実現された。これまで、URLに変更があると、useQueryStateを使用しているすべてのコンポーネントが再レンダリングされていたのは、共有URLオブジェクトの参照が変更されるためであった。しかし、バージョン2.5からは、特定のキーが変更されたときのみコンポーネントが再レンダリングされるようになった。この挙動は、React SPA、React Router、Remix、TanStack Routerのコアアダプターに組み込まれている。なお、Next.jsは、常に参照が変更される単一のURLSearchParamsコンテキストを内部で使用しているため、例外となっている。Nuqsのメンテナーは、これを緩和するためにNext.jsとの継続的な協力を述べている。
Nuqs 2.5では、実験的なTanStack Routerサポートも追加された。互換性アダプターにより、Nuqsが管理するURLステートがTanStack Routerのルーティングロジックと共存できるようになり、標準スキーマインターフェースはURLステート定義とルートバリデーションを結びつけるのに役立つ。機能の互換性は限られているものの、これによりモノレポやReactフレームワーク間での共有ロジックの可能性が広がることとなった。
今回のリリースには、いくつかの利便性向上のための更新が含まれている。具体的には、モジュールフェデレーションのためのpackage.jsonのexports対応、アダプターのためのより多くのグローバルデフォルトオプション、デフォルト値に対するより良い型推論が追加された。また、Nuqsは「ランタイム依存関係ゼロ」のライブラリとなり、新機能が追加されたにもかかわらず、サイズは5.5KB未満であることも注目されている。
最近の小規模な2.6リリースでは、いくつかの強化が追加された。新たに導入されたprocessUrlSearchParamsフックにより、開発者はURLSearchParamsをインターセプトし、変換することが可能となった。また、shallow: trueがデバウンスと共に使用される際には、新しい警告メッセージが表示されるようになった。
Threads上のユーザーが2.5.0リリースについてコメントし、新機能を強調した。
nuqs@2.5.0は非常に優れています。デバウンス、標準スキーマ、キーの分離、TanStack Routerサポートが含まれています。
Nuqsは、URLクエリパラメータをReactアプリケーションにおける第一級のステートとして扱うことに焦点を当てたオープンソースプロジェクトである。useQueryStateフックを提供し、これはuseStateのセマンティクスを反映しており、型安全性、シリアライズ/パース、サーバー/クライアントの調整が組み込まれている。バージョン2.5では、Nuqsはスキーマツールとの統合を深め、開発者に更新動作に対するより多くの制御を提供し、分離を通じて不必要な再レンダリングを削減する一方で、より良いルーティングの相互運用性の基盤を築いている。