将两个状态设置在相同的功能中还是在同一使用效应有害中？我的功能组件不断渲染

Question

//ChatProvider.tsx

import { useRouter } from 'next/router'
import React, { createContext, ReactNode, useEffect, useState } from 'react'

export interface IUser {
  name: string
  email: string
  token: string
  pic: string
}

export interface userContextInterface {
  user: IUser | null
  isLoggedIn: boolean
  login: (_: IUser) => void
  logOut: () => void
}

const intialContext: userContextInterface = {
  user: null,
  isLoggedIn: false,
  login: (_: IUser) => null,
  logOut: () => null,
}

export const ChatContext = createContext<userContextInterface>(intialContext)

const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<IUser | null>(null)
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const router = useRouter()

  const loginUser = (userInfo: IUser) => {
    setUser(userInfo)
    setIsLoggedIn(true)
    localStorage.setItem('chatUserInfo', JSON.stringify(userInfo))
  }

  const logOut = () => {
    setIsLoggedIn(false)
    localStorage.removeItem('chatUserInfo')
    setUser(null)
  }
  //this is getting printed in a loop like 100 times
  console.log('hey context api is running')

  

  useEffect(() => {
    console.log('use effect is running')
    const storedUser = localStorage.getItem('chatUserInfo')
    console.log('is there user', storedUser)
    let userInfo: IUser | null = null
    if (storedUser) {
      userInfo = JSON.parse(localStorage.getItem('chatUserInfo') || '')
      setUser(userInfo)
    //commenting setIsLoggedIn below line fixes the issue
      setIsLoggedIn(true)
    } else {
      router.push('/')
    }
  }, [])

  return (
    <ChatContext.Provider
      value={{
        user,
        isLoggedIn,
        login: loginUser,
        logOut: logOut,
      }}
    >
      {children}
    </ChatContext.Provider>
  )
}

export default ChatProvider

在使用LocalStorage的用户后，我将具有LocalStorage Info的setuser（在下一行）中，我有了SetisloggedIn（true）。是否在相同的功能中设置两个状态或禁止在相同的使用效果中设置两个状态？我无法理解，该组件在循环中呈现自身。哪个最好的方式是sotuser，也是setisloggedin作为真实的方法？如果我评论setisloggedin（true）的行，那么解决了问题。每当我设置sistisloggedin（true）时，它会导致多个渲染，我不知道为什么这线引起问题

Answer 1

不确定这里有什么问题，但是设置两个状态不应该是问题。

useEffect(() => { 
    const storedUser = localStorage.getItem('chatUserInfo')
    if (storedUser) {
      setIsLoggedIn(true)
      setUser(JSON.parse(localStorage.getItem('chatUserInfo') || ''))
    } else {
      router.push('/')
    }
  }, []);

这是一个有效的演示