Firestore のオンスナップショットでの使用に適した React Hook の選択

Question

私は React Native アプリで Firestore スナップショットをよく使用します。 Reactフックも使用しました。コードは次のようになります:

useEffect(() => {
    someFirestoreAPICall().onSnapshot(snapshot => {

        // コンポーネントが最初にロードされるときに、ロードされたすべてのデータを状態に追加します。
        // Firestore 上のデータが変更されると、このコールバックで更新を受け取ります。
        // その後、現在の状態に基づいて UI を更新します

    });;
}, []);
<p>最初は、<code>useState</code> が UI の保存と更新に最適なフックだと思いました。ただし、空の依存関係配列が付属する <code>useEffect</code> フックの設定によれば、スナップショット コールバックが起動され、現在の状態を新しい変更で変更しようとすると、現在の状態は未定義になります。これは閉店によるものだと思います。この問題は、次のコードで <code>useRef</code> と <code>forceUpdate()</code> を使用することで解決できました。
<pre class="brush:php;toolbar:false;">const dataRef = useRef(initialData);

const [, updateState] = React.useState();
constforceUpdate = useCallback(() => updateState({}), []);

useEffect(() => {
    someFirestoreAPICall().onSnapshot(snapshot => {

       // スナップショットデータを追加する場合
       dataRef.current.push(newData)
       アップデートさせる（）

       // スナップショットデータが更新された場合
       dataRef.current.find(e => 何らかの条件) = updatedData
       アップデートさせる（）

    });;
}、[]);

戻る（
// dataRef.current を使用する JSX
)

私の質問は、useRef と useState とは異なる forceUpdate を正しく使用しているかということです。 useRef フックを更新して、アプリケーション全体で forceUpdate() を呼び出すのは正しくないような気がします。 useState を使用しようとしたときに、状態変数を依存関係配列に追加しようとしましたが、無限ループが発生しました。スナップショット関数を 1 回だけ初期化し、バックエンドの変更 (onSnapshot コールバックでトリガーされる) に応じてコンポーネント内のステートフル データを時間の経過とともに更新したいと考えています。

Answer 1

useEffect と useState を組み合わせるとさらに良くなります。 useEffect はリスナーの設定と無効化を担当し、useState は必要なデータのみを担当します。

リーリー

これにより、アプリケーションの useState フックで「データ」を直接参照できるようになります。

Answer 2

単純な useEffect がうまくいきました。ヘルパー関数などを作成する必要はありません。

リーリー

単純な useEffect が私にとっては機能します。ヘルパー関数などを作成する必要はありません。

リーリー