在呈现之前，我的组件应该检查用户是否授权。
函数checkAuth（）执行此任务。当函数执行其工作时，状态isLoading等于true。在其工作结束之前，函数将状态isLoading赋值为false
当此状态为true时，组件将呈现加载动画。
当state等于false时，组件呈现其他内容
我的问题是组件在一遍又一遍地循环渲染。如果我理解正确的话，函数checkAuth()的状态发生了变化，作为观察者的组件对这种变化做出React并重新渲染自己。重新渲染后，函数checkAuth()再次启动，依此循环。
我试着在useEffect内部和外部调用这个函数，但没有任何帮助。
我期待：函数checkAuth（）运行状态isLodaing赋值为true组件呈现checkAuth在函数checkAuth结束之前继续执行其工作，状态isLoading赋值为false
组件观察到此停止呈现开始呈现另一内容：路线
非常感谢您的阅读。
组件：

const AppRouter: FC = () => {
  const controller = useContext(ControllerContext)

  useEffect(() => {
    controller.checkAuth()

  })

  if (controller.appStore.getIsLoading) {
    console.log('loading');

    return (<Loading />);
  }

  else return (
    <div>routes</div>

    // <Routes>

    //   {/* Private routes for authorized user */}
    //   <Route element={<PrivateRoutes />}>
    //     <Route element={<MainPageView />} path="/" />
    //     <Route element={<SettingsPage />} path="/settings" />
    //   </Route>

    //   {/* Public routes for unauthorized users */}
    //   <Route element={<UnauthorizedRoutes />}>
    //     <Route element={<LoginPage />} path="/login" />
    //     <Route element={<SignupPage />} path="/signup" />
    //   </Route>

    //   <Route element={<ErrorPage />} path="*" />

    // </Routes>
  )
};

export default observer(AppRouter);

函数checkAuth（）：

async checkAuth() {
        this.appStore.setLoading(true)
        try {

            this.userStore.setUser({
                nickname: 'igor',
                email: 'igorasdasda',
                id: 1,
                avatar: '',
                about: '',
                isOnline: true,
                onlineTime: ''
            });

            this.appStore.setAuth(true)
        }
        catch (e: any) {
            console.log(e.response.data)
        }
        finally {
            this.appStore.setLoading(false)
            console.log(this.userStore.getUser);
        }
    }

我的状态存储：
一个二个一个一个