React のポーリング用 hooks を作ったので、その詳細を記録しておきます。

はじめに

React でポーリングを行うための hooks 、 react-use-polling を作りました。

Web アプリケーションで定期的にデータを取得したい場面、たまにあると思います。
最近では SWR などのライブラリを使うことで簡単に対応することは可能です。
しかし、SWR を使っていないある程度成熟したアプリケーションの場合、 SWR を導入するほどではないけどポーリング対応したい時があります。（SWR に移行していく選択も状況によっては有ります）

一般的には setInterval などを使って定期実行させると思いますが、状況によっては「バックグラウンドでは止めておいて、アクティブに戻ったら再開したい」場合や「特定の状態では一時停止したい」場合なども想定すると、やや面倒くさいです。
そこである程度汎用化したものを custom hooks として作っておいたら便利ではと思い作ったものが react-use-polling です。

使い方

使い方はシンプルです。
定期実行させたい非同期関数と間隔を hooks に渡すだけでポーリングを行うことが出来ます。

react-use-polling には、バックグラウンドではポーリングを止めておく usePolling と、ブラウザがアクティブかどうかに問わず動き続ける usePollingForce を実装しています。

それぞれの hooks は、ポーリングの動作状態、一時停止、再開を行う Controls を返します。
使用するコンポーネント側で、これらの情報を使った制御を行うことが可能です。

また、 onError を渡すことで、ポーリング中にエラーが発生した場合のハンドリングの制御も可能としています。

それぞれの hooks に関して簡単な例を記載しておきます。

このライブラリは npm から追加することができます。

npm install react-use-polling

usePolling

import { usePolling } from 'react-use-polling'

const INTERVAL = 1000

const asyncFunction = async () => {
  // ...
}

function App() {
  usePolling(asyncFunction, INTERVAL)

  return (
    // ...
  )
}

これだけで asyncFunction が定期実行されるようになります。
このコンポーネントがアンマウントされるとポーリングは完全に停止します。
バックグラウンドで停止する仕組みには requestAnimationFrame を利用しています。

usePollingForce

import { usePollingForce } from 'react-use-polling'

const INTERVAL = 1000

const asyncFunction = async () => {
  // ...
}

function App() {
  usePollingForce(asyncFunction, INTERVAL)

  return (
    // ...
  )
}

使い方は usePolling と一緒です。
こちらもアンマウント時には完全に停止します。
違いとしては、ブラウザがバックグラウンドにあっても動作します。

まとめ

React でポーリングを行うための react-use-polling を作りました。
リリース時は最低限の機能しか実装していませんが、随時機能追加を行っていこうかと思っています。