Recoilを使ったReactのカスタムフックを書く時のスニペットメモ

2

2023年01月03日 13:37

こんにちわ。nap5です。

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

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

まず、ストア側

img

次にフック側

img

最後にコンポーネント側

img

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

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

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

デモサイトです。

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

デモコードです。

https://codesandbox.io/s/b6xw2j

# React.js
# Next.js
# TypeScript
2

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。

-

ランク

目次を見る