React开发中函数定义是否必须放在useEffect内部？相关用法咨询

你当前的写法功能可以正常运行，但存在2个潜在风险：

• 会触发React ESLint规则的react-hooks/exhaustive-deps警告：你在useEffect内部调用了外部定义的getSchools，但依赖数组为空，规则会提示你缺少依赖项。如果后续你修改getSchools的逻辑，新增了对组件props、state的依赖，空依赖数组会导致useEffect内始终调用首次渲染生成的旧版本getSchools，出现闭包陈旧问题，拿到错误的旧数据。
• 若schoolsCollectionRef是组件内的动态变量（比如依赖props生成、或者用state存储），同样会有闭包陈旧问题，导致请求的数据源和预期不符。

优化方案（满足外部可调用的需求） #

用useCallback包裹getSchools，显式声明它的所有依赖，再把包裹后的函数加入useEffect的依赖数组即可：

import { useCallback } from 'react'

// 依赖数组填写所有getSchools用到的外部变量
const getSchools = useCallback(async () => {
  const data = await getDocs(schoolsCollectionRef)
  setSchools(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
  console.log(data.docs)
}, [schoolsCollectionRef])
// React会保证setSchools是稳定函数，不需要加入依赖数组

useEffect(() => {
  getSchools()
}, [getSchools])

你在条目删除、更新完成后直接调用getSchools()即可触发数据刷新，不会有逻辑问题。

可选优化：避免内存泄漏警告 #

如果组件可能在请求返回前卸载，可以增加挂载状态判断，避免卸载后调用setSchools触发警告：

const getSchools = useCallback(async (isMounted = true) => {
  const data = await getDocs(schoolsCollectionRef)
  if (isMounted) {
    setSchools(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
  }
  console.log(data.docs)
}, [schoolsCollectionRef])

useEffect(() => {
  let isMounted = true
  getSchools(isMounted)
  return () => {
    isMounted = false
  }
}, [getSchools])

如果你确认getSchools用到的所有外部依赖（包括schoolsCollectionRef）都是永远不会变化的常量，那么你原来的写法功能上没有问题，只需要在依赖数组处加ESLint忽略注释即可，但不推荐这种写法，后续维护容易出现隐式bug。

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