Javascript Reaction useState和useLoaderData的组合使用引发无限循环错误

初始情况: 我有一个元素"根"，它在每次调用时判断用户是否经过身份验证.我目前正在试用新的Reaction-RoutV6，遇到了所谓的"装载器".如果我现在通过加载器进行API调用，然后希望使用useState在元素中设置一个变量.我得到一个无限循环错误.

My main.jsx(定义路由的位置):

import './index.css'

import React from 'react'
import ReactDOM from 'react-dom/client'

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import authLoader from './loader/AuthLoader'

// -- route elements --
import Root from './routes/root/root'
import Login from './routes/login/login'


const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: authLoader
  },
  {
    path: "/login",
    element: <Login />
  }
], {basename: "/"})

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

My AuthLoader.js(API调用的加载器函数):

import { API_HOST } from "../config"

const authLoader = async () => {
  return await fetch(`${API_HOST}/auth/me`, {
    credentials: 'include'
  })
}

export default authLoader

最后是我的root.jsx

import { useState } from "react"
import { Outlet, useLoaderData } from "react-router-dom"
import { UserContext } from "../../context/UserContext"

const Home = () => {
  // states
  const [user, setUser] = useState()

  const auth = useLoaderData()

  if(auth.success) {
    /**
     * This is not working and throws an infinite loop error
     */
    setUser(auth.data.user)
  }
  
  return (
    <UserContext.Provider value={{user, setUser}}>  
      <Outlet/>
    </UserContext.Provider>
  )
}

export default Home

如果我插入console.log而不是setUser(auth.data.user)，我会得到预期的结果.但是，只要我try 使用useState来设置出现在响应中的值，就会收到以下错误消息.

有没有人能帮我纠正这个错误，或者至少解释一下我为什么会出现这个错误？

非常感谢.