React アプリの Firestore クライアントは Websocket を使用しませんが、数百の POST リクエストを作成します

Question

私は React と Firestore (バージョン 9) を初めて使用します。

チュートリアルに従って、コレクションを読み取って表示するための単純なリスナーを作成しました。 Firestore がデフォルトで Websocket を開き、Websocket を通じてドキュメントの同期を維持できるようにしたいと考えています。 エンドポイント https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=... に対して 1 秒あたり複数の POST リクエストを行っていることがわかります。

私は VPN に接続していないので、ファイアウォールが Websocket をブロックすべきではありません。

このような多数のリクエストについて心配する必要はありますか? 何らかの方法で FS に Websocket を使用させることはできますか?

Firebase.INTERNAL.forceWebSockets(); を読みましたが、Typescript ではアクセスできないようです。

私のコンポーネント:

デフォルト関数 App() をエクスポート { const DogsCol = collection(firestore, 'dogs'); const [dogs, setDogs] = React.useState<Dog[]>([]); useEffect(() => { const unSubscribe = onSnapshot(dogsCol, DogsSnap => { const DogsArray = DogSnap.docs.map(dogSnap => { const Dog = DogSnap.data() as Dog; 犬.id = 犬スナップ.id; 犬を返す。 }); setDogs(dogsArray); }); return () => unSubscribe(); }); 戻る （ <コンテナmaxWidth="sm"> <ボックス sx={{ my: 4 }}> {dogs.map(dog => <div key={dog.id}>{dog.name}</div>)} </ボックス> </コンテナ> ); }

私の Firestore 構成:

const firebaseConfig = { APIキー: "...", //等 }; const app = 初期化App(firebaseConfig); エクスポート const auth = getAuth(app); エクスポート const firestore = getFirestore(app); const プロバイダー = 新しい GoogleAuthProvider(); Provider.setCustomParameters({ プロンプト: 'アカウントの選択' }); import const SignInWithGoogle = () =>signInWithPopup(auth, Provider)

Answer 1

＃＃＃＃＃＃質問：＃＃＃＃＃＃

1 秒あたり複数の投稿リクエストを取得している理由は、useEffect に依存関係の配列がなく、 (強調表示された部分は犬の状態を変更するため、再レンダリングが発生し、その結果 unsubscribe メソッドが呼び出されます。再レンダリング後に useEffect が再度入力され、無限ループが表示されます)

空の配列を追加すると問題は解決するはずです (はい、パフォーマンス、フリーズ、クラッシュなどのフロントエンドとバックエンドの問題を引き起こす可能性があり、また Firestore の料金を支払う原因になる可能性があるため、これを心配して避けるべきです)。

修正方法:

p>

useEffect を に変更してみてください useEffect(() => { const unSubscribe = onSnapshot(dogsCol, DogsSnap => { const DogsArray = DogSnap.docs.map(dogSnap => { const Dog = DogSnap.data() as Dog; 犬.id = 犬スナップ.id; 犬を返す。 }); setDogs(dogsArray); }); return () => unSubscribe(); },[]); //

残りを正しく設定した場合は、空の依存関係配列を追加することで (コンポーネントのインストール時にのみサブスクライブします)、データの同期が維持されるはずです (

Firebase.INTERNAL.forceWebSockets();## は必要ありません)。 # または同様のもの)