双越老师，我最近在搭一个开发环境，在处理用户信息的时候遇到了一个死循环的问题，我能想通为啥会出现死循环，但是不知道怎样优化最为合适，能给些建议吗？
Header组件：

import React from 'react';
import { Layout, Popover } from 'antd';
import { getToday } from '@/assets/js/transform';
import useUserInfo from './useUserInfo';
import styles from './Header.less';

function Header() {
  // 写了一个hook获取用户信息
  const userInfo = useUserInfo();
  console.log('userInfo = ', userInfo)
  return (
    <Layout.Header className={styles.container}>
      <div className={styles.userInfo}>
        <Popover
          content={userInfoContent}
          className={styles.user}
        >
          {`${userInfo.userName || '游客'}，${meridiem}好！`}
        </Popover>
      </div>
    </Layout.Header>
  );
}

export default Header

Hook

import { useState } from 'react';
import { JSONParse, JSONStringify } from '@/assets/js/utils';
import { CACHE_USER_INFO } from '@/assets/js/constant';
import { getUserInfo } from '@/service/login/login';

function useUserInfo() {
  const [userInfo, setUserInfo] = useState({});
  const cacheUserInfo = JSONParse(window.localStorage.getItem(CACHE_USER_INFO));
  /**
   * 从缓存中拿，或者通过接口拿
   */
  if (cacheUserInfo) {
    setUserInfo(cacheUserInfo);
  } else {
    getUserInfo().then(({ success, data }) => {
      if (success) {
        setUserInfo(data);
        window.localStorage.setItem(CACHE_USER_INFO, JSONStringify(data));
      }
    })
  }
  return userInfo;
}

export default useUserInfo;