【React】nuqsを使ってstateをURLに保存してみる！

nuqsとは

公式ドキュメントのスクショです

Type-safe search params state manager for React

とあります。
React用の、型安全なURLクエリパラメータを利用したstate管理ライブラリです。

URLクエリパラメータを利用したstate管理？

state管理と聞くと、useState() を利用した管理や、recoil（古い？）、redux 、jotai を使用した管理などがパッと思いつくと思います。

nuqsでは、このstateをURLのクエリパラメータとして表現し、管理します。
公式ドキュメントのサンプルを触って、どういうことなのか見てみます。

なんとなく雰囲気が理解できたでしょうか？
inputに入力した値がURL上に現れること、
逆に、URL上のクエリパラメータが画面に反映されることが確認できました。

URLクエリパラメータを利用したstate管理の個人的推しポイント

1. ページの共有が簡単（URLに状態が含まれる）！！
stateがURLに含まれるため、ブックマークやURLを転送しての共有などが簡単に行えます。
filter条件やsort条件などをURL上で管理することで、filter/sort後のページを簡単に表示できます！

2. ブラウザの戻る/進む/リロードボタンでの状態管理が簡単！！
上とほぼ同じですが、URLでstateが管理されていれば、このように使えます。
個人的には、リロードしても大丈夫なのがかなり好きです。

なんとなく動作の雰囲気とメリットが把握できたと思うので、実際にはろーわーるどしてみます。

やってみる

プロジェクト準備

過去に投稿した記事を参考に、vite + React 環境を用意します。

毎回めんどくさいのでリポジトリを作りました

nuqsライブラリの追加

ドキュメントを参考にすすめていきます

npm install nuqs

アダプターの追加

vite + React用の項目を参考にアダプターを実装します

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+ import { NuqsAdapter } from 'nuqs/adapters/react'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
+   <NuqsAdapter>
      <App />
+   </NuqsAdapter>
  </StrictMode>,
)

使ってみる

ドキュメントのbasic-usageをまずはやってみます

ドキュメントを参考に、App.tsxを編集します

src/app.tsx

import { useQueryState } from 'nuqs'

export function App() {
  const [name, setName] = useQueryState('name')
  return (
    <>
      <input value={name || ''} onChange={e => setName(e.target.value)} />
      <button onClick={() => setName(null)}>Clear</button>
      <p>Hello, {name || 'anonymous visitor'}!</p>
    </>
  )
}

export default App

動作を確認してみます！！

npm run dev

表示はよさそうです

URLクエリパラメータでstate管理できてますね！！！

コードを見てわかる通り、nuqsはかなりuseState() によせて作られているため、簡単に移行または導入できそうです。

-   import { useState } from 'react';
-   const [name, setName] = useState('name')
/* ↓↓↓  */
+   import { useQueryState } from 'nuqs'
+   const [name, setName] = useQueryState('name')

ただ、注意が必要なのは、こういったstateをページ遷移先へ持っていきたい場合です。
react-router-dom でもやりようはありますが、微妙な感じもあります。

tanstack-router というライブラリを使用すると、URLでstateを扱いながら型安全にページ遷移まで行えます。

以前記事を書いているので、気になる方はぜひ見てみてください（なんかダイマみたいになったな）

おわりに

今回はsuinさんのポストに影響され、nuqsを触ってみました。

stateの永続化はローカルストレージに保存するのが一般的？な気がしているのですが、
こういった管理も良いなと感じました！！！！