React useEffect调用Firestore函数如何解决缺失依赖警告

警告说明 #

你收到的英文警告翻译为：React Hook useEffect 存在缺失的依赖项：'db'
这个警告的触发逻辑是React的Hook规则要求所有在useEffect内部用到的外部变量，都需要声明到依赖数组中，避免因变量更新后effect未重新执行导致的逻辑错误。 #

能不能直接忽略这个警告？ #

不建议直接忽略，除非你100%确定db实例在组件的整个生命周期内永远不会发生变化，直接忽略可能会在后续代码迭代时留下隐性bug。 #

正确处理方式 #

你之前用useCallback处理无效是正常的，因为useCallback是用来缓存函数引用的，而你用到的db是FireStore的实例对象，不属于函数类型。你可以选择以下任意一种方案解决：

方案1：直接将db加入依赖数组（最推荐） #

绝大多数场景下，FireStore的db实例是全局仅初始化一次的，本身不会发生变更，加入依赖数组后完全不会改变你现有effect的触发逻辑（仅当props.userStatus变化时才会执行），同时可以直接消除警告。
修改后代码如下：

var db = firebase.firestore();
useEffect(() => {
  // 从数据库获取用户的平均成本数据
  if (props.userStatus) {
    db.collection("users")
      .doc(props.userStatus)
      .get()
      .then((doc) => {
        if (doc.exists) {
          if (doc.data().portfolio) {
            setCostAverages(doc.data().portfolio);
          }
        }
      });
  }
}, [props.userStatus, db]);

方案2：缓存db实例 #

如果你当前的db是写在组件内部、每次组件渲染都会重新初始化的，建议把db的初始化逻辑移到组件外部，或者用useMemo缓存实例：

// 方案2.1：全局初始化（推荐，firebase实例仅需初始化一次）
const db = firebase.firestore();

function 你的组件名(props) {
  // 方案2.2：组件内缓存实例
  // const db = useMemo(() => firebase.firestore(), []);

  useEffect(() => {
    // 原有业务逻辑
  }, [props.userStatus, db]);
}

方案3：临时忽略警告（仅当你完全确认依赖稳定性时使用） #

如果你确定不需要调整现有逻辑，可以通过eslint注释关闭当前行的依赖检测：

}, [props.userStatus]); // eslint-disable-next-line react-hooks/exhaustive-deps

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