React Navigation V6在useFocusEffect中使用useCallback报invalid-hook-call错误

问题排查与解决方案 #

最常见错误：useCallback调用位置错误 #

官方示例中是将React.useCallback()的返回值直接作为useFocusEffect的参数，如果你写成了下面的错误形式，就会触发Hook调用规则异常：

// 错误写法
useFocusEffect(() => {
  // 这里是普通回调函数作用域，不是函数组件顶层，不能调用Hook
  React.useCallback(() => {
    // 业务逻辑
  }, [deps])
})

正确写法必须严格和官方示例保持一致，直接把useCallback作为useFocusEffect的入参：

// 正确写法
useFocusEffect(
  React.useCallback(() => {
    // 业务逻辑
    return () => {
      // 清理逻辑
    }
  }, [deps])
)

其他可能的原因及修复方案 #

• 检查Hook是否被条件判断、循环语句、嵌套函数包裹：所有Hook（包括useFocusEffect、useCallback、useState等）必须直接写在函数组件的最顶层，不能放到if判断、for循环、自定义的普通函数内部
• 检查组件命名是否规范：React要求自定义函数组件首字母必须大写，如果你的组件首字母小写，React会将其识别为原生DOM元素，不会按函数组件处理，内部调用Hook就会报错
• 排查多份React副本问题：执行npm ls react命令查看是否有多个版本的React被安装，如果存在多版本冲突，可以在package.json中添加resolutions配置固定React版本，之后删除node_modules和lock文件重新安装依赖即可
• 检查React Navigation相关依赖是否安装完整：确认你已经安装了react-native-screens、react-native-safe-area-context这两个React Navigation V6的必选依赖，缺失基础依赖也可能引发异常调用问题

内容的提问来源于stack exchange，提问作者javapedia.net