React useEffect依赖项警告：如何处理userState.isAuthenticated场景？

方案1：解构Context值，仅依赖所需字段 #

直接从AuthContext中解构出isAuthenticated字段，这样useEffect的依赖数组只需要包含该字段，既符合ESLint规则，又能保证仅当认证状态变化时触发，用户其他信息修改不会影响。

const { isAuthenticated } = useContext(AuthContext);

useEffect(() => {
  if (isAuthenticated) {
    // 执行你的认证后操作
  }
}, [isAuthenticated]);

方案2：使用useRef跟踪认证状态变化（适用于需访问完整userState的场景） #

如果你的操作需要用到userState中的其他字段，可以用useRef存储上一次的认证状态，确保仅当状态从false变为true时执行逻辑，同时满足ESLint依赖要求。

const userState = useContext(AuthContext);
const prevAuthStatus = useRef(false);

useEffect(() => {
  // 仅当当前认证为true且之前为false时执行操作
  if (userState.isAuthenticated && !prevAuthStatus.current) {
    // 执行操作，可访问完整userState
    // 例如：console.log(userState.userInfo.name);
  }

  // 更新ref中的状态，记录当前认证状态
  prevAuthStatus.current = userState.isAuthenticated;
}, [userState.isAuthenticated]);

方案3：临时禁用ESLint规则（不推荐） #

如果以上方案都不适用，可以在useEffect上方添加注释禁用特定ESLint规则，但这会跳过依赖检查，可能引发潜在的 stale closure 问题，仅作为临时解决方案。

// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
  if(userState.isAuthenticated) {
      // 执行操作
  }
}, [userState.isAuthenticated]);    

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