React项目中Firebase读取量异常激增问题求助

问题描述 #

我正在开发首个较大型React项目（项目管理应用），此前进展顺利，但在实现任务添加及图表数据更新功能后，Firebase读取量急剧上升，仅30分钟便耗尽免费配额。我怀疑代码存在无限循环，但排查后未发现问题，已尝试重写代码但问题仍存在。

相关代码 #

父组件（新增/删除任务、任务状态变更时重新渲染） #

useEffect(() => {
        console.log("fetching tasks");
        fetchTasks();
        //eslint-disable-next-line react-hooks/exhaustive-deps
    }, [showAddTask, deleteTitle, rerender])

子组件TaskCard（在父组件中以列表形式渲染） #

const setTaskState = async () => {
        const task = await getDoc(currentTaskRef)
        if(task.data().state === 'incomplete'){
            await updateDoc(currentTaskRef, {state: 'complete'})
        }else{
            await updateDoc(currentTaskRef, {state: 'incomplete'})
        }
        setRerender(!rerender)
}

点击setTaskState会切换任务状态（完成/未完成），触发父组件重新渲染并获取更新后的排序数据。

数据库结构 #

可能的原因分析 #

• fetchTasks实现逻辑低效：如果fetchTasks是逐个调用getDoc获取单条任务数据，而非用getDocs批量读取整个集合，那么每次父组件渲染时，N个任务就会产生N次独立的Firebase读取请求。若短时间内多次触发渲染（比如频繁切换任务状态），读取量会快速累积。
• 隐性循环渲染触发重复读取：setRerender(!rerender)会触发父组件重渲染并调用fetchTasks。如果fetchTasks执行过程中又间接修改了rerender或依赖数组中的其他状态（比如showAddTask/deleteTitle），会形成隐性的循环渲染，持续发起读取请求。
• 图表组件的额外重复读取：新增的图表数据更新功能，如果未做缓存或防抖处理，每次父组件渲染时图表也会重复读取Firebase数据，进一步叠加总读取量。
• 未使用实时监听替代主动拉取：当前每次渲染都通过fetchTasks主动拉取数据，而非使用Firebase的onSnapshot监听集合变化。onSnapshot只会在数据实际变更时更新，初始读取一次后仅同步变更部分，而主动拉取会在每次渲染时全量读取，大幅增加请求次数。

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