はじめに
実務で、タブを切り替えることで表示するデータを変更するようなUIを実装することになりました。
この実装をするにあたり、設計時に、状態管理の方法として以下の2つのアプローチを検討しました。
- Stateによって切り替える方法
- クエリパラメーターによって切り替える方法
こちらの記事で、それぞれのメリットとデメリットを比較し、最適な使い分けを考えました。
両者の使い分けについてまとめておきます。詳しくは上記の記事をご覧ください。
stateを使う場合
- 簡単なUIや内部的なタブ切り替えで、URLの共有を気にする必要がない場合
- パフォーマンスが重要視される場合
クエリパラメータを使う場合
- URLの共有やブックマークが重要な場合。例えば、ユーザーが特定のタブの情報を他のユーザーと共有したい場合
この記事では、実際に2つの方法で実装してみます🎉
実装
stateを使ってタブを切り替える場合
まずは、stateを使ってタブを切り替える方法で実装してみます。
stateを使ってタブを切り替える場合、状態管理が全てReactコンポーネント内に収まります。
タブを切り替えたときにURLが変わっていないことが確認できます。タブの状態管理はstateだけなので、コード量が少なく、実装がとてもシンプルですね🎉
React Routerなどの外部ライブラリを導入せずにタブを切り替えることができました。
クエリパラメータを使ってタブを切り替える場合
続いて、クエリパラメータを使ってタブを切り替える方法で実装してみます。
タブを切り替えたときにURLが変化していることが確認できます。また、stateのときと比べてコード量が増えていることがわかります。
クエリパラメータの管理は、React Routeを導入しました。
useSearchParamsを使用し、クエリを取得しています。
余談ですが、このhooksを使うためには、<BrowserRouter>の配下にある必要があると初めて知りました💡
React Routerを導入するだけでは使えないんですね…
実務はすでにReact Routerが導入されていたので、気づきませんでした。自分で1から手を動かしてみると新たな発見がありますね！！
終わりに
実装してみると、やはりstateの実装の方がシンプルで簡単ですね！！
基本的にはstateを使って実装する。ただし、ユーザーさんがURLでタブの情報を共有するようなケースが想定される場合は、クエリパラメータを使って実装するという方針が良さそうですね🎉