React Native异步函数触发useEffect内存泄漏问题求助

问题分析 #

你的代码存在三个核心问题：

1. 清理函数使用异步函数：React的useEffect清理函数不支持异步，返回async函数会导致无法正确处理组件卸载后的清理逻辑，进而引发内存泄漏。
2. 无限循环触发：依赖项数组中包含accessToken，而setAccessToken会更新这个状态，导致useEffect反复触发，不断执行异步操作。
3. 错误的清理逻辑：清理函数中再次调用getAccessToken，组件卸载后仍会执行setAccessToken，这是内存泄漏的直接诱因。

修复后的代码 #

useEffect(() => {
  let isMounted = true;

  async function getAccessToken() {
    const accessToken = await AsyncStorage.getItem("access_token");
    console.log(typeof accessToken);
    // 仅在组件挂载状态下更新状态
    if (isMounted) {
      setAccessToken(accessToken);
    }
  }

  getAccessToken();

  // 清理函数：标记组件已卸载，阻止后续状态更新
  return () => {
    isMounted = false;
  };
}, [count]); // 移除accessToken依赖，避免无限循环

关键修复点 #

• 添加挂载状态标记：用isMounted变量跟踪组件是否处于挂载状态，异步操作完成后仅在组件挂载时更新状态，避免卸载后执行setState。
• 移除错误的异步清理函数：清理函数改为同步函数，仅负责更新isMounted标记，符合React的要求。
• 调整依赖项数组：去掉accessToken依赖，因为setAccessToken直接赋值时不需要依赖该状态，保留必要的count依赖即可。

额外说明 #

如果需要基于之前的状态值更新accessToken，可以使用函数式更新（如setAccessToken(prev => accessToken)），但在当前场景下，直接从AsyncStorage获取最新值即可，无需依赖旧状态。

内容的提问来源于stack exchange，提问作者Oscar Chua Wei Wen