在带依赖项的useEffect中设置Firestore onSnapshot监听器会导致多订阅吗？

我在多个组件中使用onSnapshot，知道可以在useEffect中返回unsubscribe函数，组件卸载时会自动取消订阅，不用手动操作。之前我的useEffect没有依赖项，代码如下：

useEffect(() => {
    const unsubscribe = db.collection(collectionName).doc(docId).onSnapshot(onNext, onError);
    return unsubscribe;
}, []);

现在我需要创建更复杂的查询，返回排序和过滤后的列表，既要订阅数据库变更，又要在排序/过滤参数变化时更新查询。我打算用带依赖项的useEffect，代码大概是这样：

useEffect(() => {
    const unsubscribe = db.collection( ... ).where(...sortOption something...).onSnapshot(...);
    return unsubscribe;
}, [props.sortOption, props.filterTag]);

想请教：当props.sortOption或props.filterTag变化时，会不会出现创建新订阅却没先执行旧订阅unsubscribe的情况？

完全不用担心这个问题，React的useEffect执行逻辑是固定的：

• 当依赖项（比如你这里的props.sortOption或props.filterTag）变化时，React会先调用上一次useEffect返回的清理函数——也就是你的unsubscribe，把旧订阅取消掉，然后才会执行新的useEffect回调去创建新订阅。
• 整个过程是按顺序来的，不会出现旧订阅还没取消就开新订阅的情况，能避免重复订阅带来的资源浪费或者数据混乱问题。

你就放心用这种写法就行，只要把所有影响查询的变量都放进依赖项数组里，React会帮你把订阅的创建和销毁处理得明明白白。

内容的提问来源于stack exchange，提问作者Reagankm