如何正确结合Firebase onValue()与React useState()避免无限循环？

问题场景 #

要实现从Firebase实时数据库拉取用户数据，并用onValue监听数据变化更新React状态，但原代码触发了无限循环：

const [onlineUsersStatus, setOnlineUsersStatus] = useState([])
const usersRef = ref(database, 'users')
onValue(usersRef, (snapshot) => {
  const tmpArray = []
  snapshot.forEach((childSnapshot, index) => {
    tmpArray[childSnapshot.key] = childSnapshot.val()
  })
  setOnlineUsersStatus(tmpArray)
})

原因明确：setOnlineUsersStatus触发组件重渲染，重渲染时又会重新执行onValue注册新监听，进而再次触发状态更新，形成循环。

初次尝试与误区 #

一开始尝试用useEffect包裹监听逻辑，但后续仍觉得重渲染过多：

const [onlineUsersStatus, setOnlineUsersStatus] = useState([])
useEffect(() => {
  const usersRef = ref(database, 'users')
  return onValue(usersRef, (snapshot) => {
    const users = []
    snapshot.forEach((child) => {
      users.push({
        key: child.key,
        ...child.val()
      })
    })
    setOnlineUsersStatus(users)
  })
}, [])

实际上这段代码是正确的，问题出在组件中另一块未用useEffect包裹的在线状态管理代码：

// Online state management
const myConnectionsRef = ref(database, 'users/' + auth.currentUser.uid + '/connections')
const lastOnlineRef = ref(database, 'users/' + auth.currentUser.uid + '/lastOnline')
const connectedRef = ref(database, '.info/connected')
onValue(connectedRef, (snap) => {
  if (snap.val() === true) {
    const con = push(myConnectionsRef)
    onDisconnect(con).remove()
    set(con, true)
    onDisconnect(lastOnlineRef).set(serverTimestamp())
  }
})

这段代码每次组件重渲染都会重新注册onValue监听，同时代码中对数据库的写入操作会触发用户数据节点变化，进而触发用户数据监听的回调，导致额外重渲染。

正确解决方案 #

把所有Firebase监听逻辑都包裹进useEffect，并配置正确的依赖项：

const [onlineUsersStatus, setOnlineUsersStatus] = useState([])

// 监听用户数据变化
useEffect(() => {
  const usersRef = ref(database, 'users')
  // 保存取消监听的函数，组件卸载时自动清理
  const unsubscribe = onValue(usersRef, (snapshot) => {
    const users = []
    snapshot.forEach((child) => {
      users.push({
        key: child.key,
        ...child.val()
      })
    })
    setOnlineUsersStatus(users)
  })
  return unsubscribe
}, [])

// 在线状态管理逻辑
useEffect(() => {
  // 确保用户已登录再执行
  if (!auth.currentUser) return
  
  const myConnectionsRef = ref(database, `users/${auth.currentUser.uid}/connections`)
  const lastOnlineRef = ref(database, `users/${auth.currentUser.uid}/lastOnline`)
  const connectedRef = ref(database, '.info/connected')

  const unsubscribe = onValue(connectedRef, (snap) => {
    if (snap.val() === true) {
      const con = push(myConnectionsRef)
      onDisconnect(con).remove()
      set(con, true)
      onDisconnect(lastOnlineRef).set(serverTimestamp())
    }
  })
  return unsubscribe
}, [auth.currentUser]) // 依赖用户身份，登录/登出时重新初始化

核心注意事项 #

• useEffect包裹监听：通过空依赖数组确保用户数据监听仅在组件挂载时注册一次；在线状态管理依赖auth.currentUser，随用户身份变化重新执行。
• 清理监听：onValue返回的取消订阅函数必须在useEffect返回值中返回，避免组件卸载后残留监听导致内存泄漏。
• 避免无效更新：如果需要进一步减少重渲染，可以在setOnlineUsersStatus前对比新老数据，仅在数据变化时更新状态。

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