javascript - 火炉吓坏了

Question

我刚刚在另一个域(生产 url)下打开了我的项目，当我打开网络请求时，我看到了这个:

https://i.imgur.com/NxgTmIf.mp4

这花了很长时间(8 分钟或更长时间。)而且我的 CPU 热得要命，我做错了什么？

我的应用程序很简单，我怀疑它的根源是这段代码:

  const [items, setItems] = useState([]);

  const publish = async () => {
    const batch = firestore.batch();

    items.forEach(({ id }, index) => {
      batch.update(firestore.collection('v1').doc(id), { '#': index });
    });

    await batch.commit();
  };

  const onCompletion = querySnapshot => {
    const arr = [];

    querySnapshot.forEach(document => {
      const { vid: { id: vid }, '#': index } = document.data();

      const { id } = document;

      arr.push({ id, vid, index });
    });

    setItems(arr);
  };

  useEffect(() => {
    const unsubscribe = firestore
      .collection('v1')
      .orderBy('#')
      .onSnapshot(onCompletion);

    return () => {
      unsubscribe();
    };
  }, []);

  useEffect(() => { publish(); }, [items]);

  const handleSortEnd = ({ oldIndex, newIndex }) => {
    if (oldIndex === newIndex) {
      return;
    }

    setItems(arrayMove(items, oldIndex, newIndex));
  };

基本上，它的作用是从firestore集合中的播放列表中加载视频列表，然后在用户添加新视频或再次上/下保存之后。

有什么线索吗？

编辑:在这种疯狂之后，应用程序很少请求并按预期工作。

Answer 1

我认为加载您的状态需要多次访问，原则上应该更新。为什么不在将传入的快照提交到状态之前根据需要对其进行排序。给出仅在“项目”具有预期值时进行排序的条件。
另一种方法是来自 firestore 的“setItems”，并在渲染状态期间对数据进行排序，而不是在渲染前达到状态。
此外，每次排序时将一组新数据设置为您的状态是突变。 React 会将它们作为渲染前的新数据，这效率不高。