こんにちわ。nap5です。

Recoilを使ったReactのカスタムフックを書く時のスニペットメモを紹介したいと思います。

ストア側、フック側、コンポーネント側の３つから主になります。

まず、ストア側

次にフック側

最後にコンポーネント側

こうすることで、今回でいうところでのページ番号をフックをImportしたコンポーネントで参照できるようになってきます。

例えば、データ取得する際に参照したりとかは使い勝手がいいと思います。

実現したい機能に合わせて応用していくのがいいかもですね。

デモサイトです。

https://react-query-offset-based-pagination-typescript-nextjs-app.vercel.app/

デモコードです。

https://codesandbox.io/s/b6xw2j