useSWRInfiniteを使うとページング(無限スクロール)の処理がシンプルに書けて気持ちいい！
はじめに こんにちは、最近SWRを使いこなすのが楽しくなってきた今日この頃の、からまげです。 SWRでページング(無限スクロール)する際、useSWRInfiniteを使うと驚くほどシンプルにコードが書けることがわかり、共有したくてこの記事を書いています。 この記事が、誰かのお役に立てれば幸いです。 わたしは、「Focus Cafe」を個人開発しています。 「みんなでポモドーロテクニックを使ってもくもく集中する」 Webサービスです。 Focus Cafeでは、SWRを使って、データフェッチや状態管理を行っています。 SWRは、React Hooks用のデータフェッチライブラリです。 ページング(無限スクロール)とは ページングとは、データの一覧をページ単位でオフセットとリミットを扱うAPIからデータ取得するような処理のことです。 ページング処理は、状態管理もあいまって複雑になりがちで、エ
交差オブザーバー API - Web API | MDN
交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。 従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり、その解決策は信頼性が低く、ブラウザーやアクセスするサイトの動作が重くなる傾向がありました。ウェブが成熟していくにつれて、このような情報の必要性は高まっていきます。交差情報 (Intersection information) についての情報は次の理由から必要とされています。 ページがスクロールした際の画像やその他のコンテンツの遅延読み込み。 「無限スクロール」をするウェブサイトを実装し、スクロールに従って次々とコンテンツを読み込んで、ユーザーがページの切り替えをせずに済むようにすること。 広告費を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
