Next.js App Router中Dashboard页面useEffect重复触发问题求解

原因分析 #

1. 组件重新挂载：App Router中，使用客户端钩子（如useState/useEffect）的页面组件会被标记为Client Component，导航离开后组件会被卸载，返回时重新挂载，因此挂载时的useEffect会再次执行。
2. 依赖项引用变化：每次调用setUser({ ...user, isAcceptingMessage: ... })都会创建新的user对象引用，导致依赖user的useEffect因依赖项变化重复触发。

解决方案 #

方案1：限制useEffect仅首次挂载执行 #

如果希望获取消息状态的逻辑只在组件第一次加载时执行，后续路由返回不再触发，用useRef标记首次挂载状态：

function Dashboard(): React.ReactElement {
  const { data: Session } = useSession()
  const [acceptMessageStatus, setAcceptMessageStatus] = useState(false)
  const user = userStore((state) => state.user);
  const setUser = userStore(state => state.setUser)
  const [feedbackUrl, setFeedbackUrl] = useState('')
  const isFirstMount = useRef(true); // 标记首次挂载

  useEffect(() => {
    if (!user && Session?.user) {
      setUser(Session.user)
    }
  }, [Session, setUser, user])

  useEffect(() => {
    // 非首次挂载直接返回
    if (!isFirstMount.current) return;
    isFirstMount.current = false;

    console.log("render useeffect");
    if(user){
      (async () => {
        try {
          const res = await axios.get('api/accept-messages')
          if (res.data) {
            // 使用函数式更新，避免依赖整个user对象
            setUser(prev => ({ ...prev, isAcceptingMessage: res.data.isAcceptingMessage }))
          }
        } catch (error) {
          console.log(error);
        }
      })();
    }
    
  }, [setUser, user]);

  useEffect(() => {
    setFeedbackUrl(`${location.origin}/u/${user?.username}`);
  }, [user]);

  return (
    <div className=' w-full flex flex-col px-1 xl:px-56 lg:px-40 md:px-12 max-md:px-24 max-sm:px-2 pt-14 '>
    </div>
  )
}

export default Dashboard

方案2：优化依赖项，避免引用变化触发 #

改用函数式更新更新user，并依赖user的稳定标识（如id或username），而非整个对象：

useEffect(() => {
  // 无有效用户时直接返回
  if(!user?.username) return;

  console.log("render useeffect");
  (async () => {
    try {
      const res = await axios.get('api/accept-messages')
      if (res.data) {
        // 函数式更新，基于前状态修改，无需依赖整个user对象
        setUser(prevUser => ({ 
          ...prevUser, 
          isAcceptingMessage: res.data.isAcceptingMessage 
        }))
      }
    } catch (error) {
      console.log(error);
    }
  })();
}, [setUser, user?.username]); // 依赖稳定的username，而非整个user对象

这样只有当用户身份切换（username变化）时才会触发，避免每次user属性更新都执行逻辑。

方案3：合并重复逻辑减少触发 #

把设置用户和获取消息状态的逻辑合并，减少useEffect的数量和触发次数：

const isFirstMount = useRef(true);

useEffect(() => {
  if (!isFirstMount.current) return;
  isFirstMount.current = false;

  const initUserData = async () => {
    // 先初始化用户
    if (!user && Session?.user) {
      await setUser(Session.user);
    }
    // 用户存在时获取消息状态
    if (user) {
      const res = await axios.get('api/accept-messages');
      if (res.data) {
        setUser(prev => ({ ...prev, isAcceptingMessage: res.data.isAcceptingMessage }));
      }
    }
  };

  initUserData();
}, [Session, setUser, user]);

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