Reactで綺麗に無限スクロールを実現するためにIntersectionObserverを使いましょう的なお話

色々と実装していると、なんだかんだで無限スクロールを実装したいことって多々あるわけで。
もちろん単純なページングを実装してもいいのだけど、React使ってSPA的なことを書いているとページングよりも無限スクロールで配列にガンガン後ろに足していくっていう方が楽だったりもするわけで。
その際にもっと見るボタンをユーザが押して新しくデータを取って来て云々をしてもいいけどやっぱ流れるようにみたいわけで。

ってことでIntersectionObserverを使うとそこらへんの実装が簡単になるので、それをhooks化して使っちゃおう的なお話をば。

eslintルールのreact-hooks/exhaustive-depsを設定していると無限ループに陥った的なお話

hooksは便利というかいい感じなわけで。
useStateとかuseCallbackとか色々とあるわけで。
その中で公式的にESLint入れるならばreact-hooks/exhaustive-depsとreact-hooks/rules-of-hooksを入れておけって言ってるんだけど、react-hooks/exhaustive-depsが悪さをしていたっていう。

ということで今日はreact-hooks/exhaustive-depsが悪さをするパターン的なお話をば。