//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

En useEffect, una vez que obtengo el usuario de localStorage, tengo setUser con información de almacenamiento local, también en la siguiente línea, tengo setIsLoggedIn (verdadero). ¿Está prohibido establecer dos estados en la misma función o dentro del mismo efecto de uso? No puedo entender, el componente se está renderizando en un bucle. ¿Cuál es la mejor manera de establecer Usuario y también establecer IsLoggedIn como verdadero? Si comento la línea setIsLoggedIn(true), el problema se resuelve. Cada vez que configuro IsLoggedIn (verdadero) está causando múltiples renderizaciones, no sé por qué esta línea está causando problemas