• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

102
Vistas
Conditionally check value from context and then navigate after login in the same function call in React

In React I'm using the context API to set the user data or the errors returned by the API request:

// context
const [currentUser, setCurrentUser] = useState("")
const [error, setError] = useState("")

async function login(credentials) {
    setError("")
    try {
        ...API request
        const data = await response.json()
        if(data.success) {
            setCurrentUser(data)
        } else {
            setError(data.error)
        }
    } catch (error) {
        setError("Something went wrong. Please try again.")
    }
}

<AuthContext.Provider value={login, currentUser, error}>
    {children}
</AuthContext.Provider>

Then in my component:

//component
const { login, currentUser, error } = useContext(AuthContext)

const onSubmit = async (credentials) => {
    setLoading(true)
    await login(credentials)
    resetForm({})
    setLoading(false)
    !error && navigate("/")
}

return (
    ...
)

Now the onSubmit function allows the user to navigate to / even if there is an error set by the context - this is because (I think) the error is still null by the time it's checked and the component doesn't get the chance to rerender to get the newest value.

What would be the best approach to avoid this behavior? Should I handle the error locally in the component and not the context? If yes, what would be the best way on doing so in my scenario?

Thank you!

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Quick solution

There are of course others ways of doing this, but the one that wouldn't change that much your current structure is to change onSubmit function so you dont do the redirection there:

const onSubmit = async (credentials) => {
    setLoading(true)
    await login(credentials)
    resetForm({})
    setLoading(false)
}

Create an useEffect that would the do the redirection, but based on wether there is a user or not:

useEffect(()=>{
  if(currentUser){
    navigate("/")
  }
},[currentUser])

And yes when you are calling !error && navigate("/") there is no re-render yet, and therefore error is still equal to "", which is why the redirection is happening right away.

Another way

Assuming that the login process is handled in one place (which is the case in most scenarios), there is no need to have login function and error state as part of the context. The context should export just setCurrentUser and currentUser.

<AuthContext.Provider value={currentUser, setCurrentUser}>
    {children}
</AuthContext.Provider>

The login and errors related to login would be handled inside the login page, and it would call setCurrentUser to update the context for other components:

const {currentUser, setCurrentUser} =  useContext(AuthContext)

And you would use the same useEffect as above to make redirection when there is currentUser.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda