React useEffect设置加载状态时的依赖项告警处理及最佳实践

核心原因说明 #

你遇到的告警本质是linter检测到useEffect内部用到了外部变量，要求加入依赖数组。你担心加入后触发重复请求，本质是默认你的STATUSES是组件内部每次渲染都会重新创建的对象，引用不稳定导致的。只要保证依赖项的引用稳定，直接加入依赖数组完全不会触发多余请求。

推荐解决方案 #

方案1：将STATUSES移到组件外部定义（最优） #

如果STATUSES是固定枚举值，直接定义在组件外部，它的引用会永久稳定，即使加入依赖数组也不会触发useEffect重复执行：

// 组件外部定义，引用不会随渲染变化
const STATUSES = {
  LOADING: 'loading',
  IDLE: 'idle'
}

function MyComponent() {
  const [status, setStatus] = useState(STATUSES.IDLE)
  const [data, setData] = useState(null)
  // 注意：getData如果是内部定义的方法，需要用useCallback包裹保证引用稳定
  const getData = useCallback(() => {
    return fetch('/your/api').then(res => res.json())
  }, [])

  useEffect(() => {
    setStatus(STATUSES.LOADING);
    getData()
      .then(result => {
        setStatus(STATUSES.IDLE);
        setData(result);
      });
  // 加入稳定的依赖项，不会触发多余执行
  }, [STATUSES.LOADING, STATUSES.IDLE, getData])

  // 组件其余逻辑
}

方案2：useMemo包裹动态STATUSES #

如果STATUSES需要依赖组件props/state动态生成，用useMemo包裹保证依赖不变时引用稳定：

function MyComponent(props) {
  // 假设STATUSES依赖props的主题配置
  const STATUSES = useMemo(() => ({
    LOADING: props.darkMode ? 'dark-loading' : 'loading',
    IDLE: props.darkMode ? 'dark-idle' : 'idle'
  }), [props.darkMode])

  const [status, setStatus] = useState(STATUSES.IDLE)
  const [data, setData] = useState(null)
  const getData = useCallback(() => fetch('/your/api').then(res => res.json()), [])

  useEffect(() => {
    setStatus(STATUSES.LOADING);
    getData()
      .then(result => {
        setStatus(STATUSES.IDLE);
        setData(result);
      });
  }, [STATUSES.LOADING, STATUSES.IDLE, getData])
}

只要props.darkMode不变化，STATUSES的引用就不会变，useEffect不会重复执行。

方案3：useRef保存固定值 #

如果不想把枚举值加入依赖数组，可以用useRef保存固定值，ref不需要加入依赖数组，linter不会触发告警：

function MyComponent() {
  const [status, setStatus] = useState('idle')
  const [data, setData] = useState(null)
  const statusEnumRef = useRef({
    LOADING: 'loading',
    IDLE: 'idle'
  })
  const getData = useCallback(() => fetch('/your/api').then(res => res.json()), [])

  useEffect(() => {
    const { LOADING, IDLE } = statusEnumRef.current
    setStatus(LOADING);
    getData()
      .then(result => {
        setStatus(IDLE);
        setData(result);
      });
  }, [getData])
}

注意事项 #

• 不要忽略lint告警直接空依赖，避免后续修改代码时出现闭包陷阱
• 所有在useEffect内部用到的外部函数（比如你的getData）都需要用useCallback包裹保证引用稳定，否则还是会出现依赖告警和重复执行的问题

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