在 REACTjs 中使用 onSnapshot Firebase 时出现内存不足错误

【问题标题】：Out of memory error on using onSnapshot Firebase in REACTjs在 REACTjs 中使用 onSnapshot Firebase 时出现内存不足错误
【发布时间】：2022-08-13 22:19:40
【问题描述】：

  useEffect(() => {
    onSnapshot(usersCollectionRef, (snapshot) => {
      setUsers(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    });
  });

我认为这是造成此问题的主要原因，因为当我使用获取文档我没有收到任何错误。我发现使用快照相反，这将有助于在网站上获得实时更新。但是让网站运行一段时间后，我得到一个错误

React 内存不足。

有没有办法解决这个泄漏？

标签： reactjs firebase google-cloud-firestore out-of-memory

【解决方案1】：

您在每次渲染时都运行此效果，并且永远不会取消订阅。使用依赖数组仅在相关事物发生变化时运行效果，并在组件卸载或依赖关系发生变化时返回取消订阅函数进行清理。

useEffect(() => {
  const unsubscribe = onSnapshot(usersCollectionRef, (snapshot) => {
    setUsers(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  });
  return unsubscribe; // <--- return teardown function
}, []); // <--- added dependency array

如果 usersCollectionRef 可以更改，则依赖数组可能需要为 [usersCollectionRef]

【讨论】：