Buen dia!
Estoy desarrollando mi primera aplicación con React JS. Estoy teniendo problemas para actualizar un estado que declaro en un contexto, siendo sincero aun no estoy muy familiarizado con como funciona un contexto. Mi contexto es el siguiente:
import{createContext, useState} from 'react'
export const AuthContext = createContext();
const AuthProvider = ({children}) => {
let [user, setUser] = useState(null)
const contextValue = {
user,
login(userName, password){
if(userName === "johnatan" && password === "vizard"){
setUser({"id":1, "userName": "Johnatan"})
}
},
logout(){
setUser(null)
},
isLogged(){
return !!user
//return !Object.keys(user).length === 0
}
}
return(
<AuthContext.Provider value ={contextValue}>
{children}
</AuthContext.Provider>
)
}
export default AuthProvider;
Tambien cree un hook para poder acceder a dicho contexto. El hook es el siguiente:
import {useContext} from 'react'
import { AuthContext } from './AuthProvider'
export default function UseAuth(){
return useContext(AuthContext)
}
Estoy trabajando con estos componentes en una función dentro de mi pagina de login que mando a llamar cuando el boton de ingresar es presionado, continuación dicha función:
const classes = useStyles();
const auth = UseAuth()
const history = useHistory();
const [form, setForm] = useState({})
function handleLogin(e){ //HANDLE LOGIN
e.preventDefault()
auth.login(form.user, form.password)
let booleano = auth.isLogged()
if(auth.isLogged()){
history.push("/home")
}
}
Mi problema es que cuando mando a llamar la funcion login que esta en mi contexto el state user no es actuaizado en el momento si no hasta que realizo una segunda llamada el metodo.
Investigando en internet encontre que useState es una funcion asincrona es por eso que el cambio en el estado no se ve reflejado de inmediato.
mi pregunta es ¿De que manera podria aolucionar este retardo?