Question 326626 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React setState not updating the state object

Debugging:
Inside the functions declared in AuthProvider, I coded a console.log() and its working. The setState that updates the state object is not updating its value. Why?

Seems like I’m missing something. Can you help me out?

AuthContext.tsx

import React, { useState } from "react";
import { AuthContextType, User } from "../@types/auth";

export const AuthContext = React.createContext<AuthContextType | null>(null);

const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [user, setUser] = useState<User>({
        auth: false,
        currentUrl: "",
    });

    const updateAuth = () => {
        console.log("Hello, world!")
        setUser({ ...user, auth: !user.auth });
    }

    const updateUrl = (url: string) => {
        setUser(user => ({
            ...user,
            currentUrl: url,
        }));
    }

    return (
        <AuthContext.Provider value={{ user, updateAuth, updateUrl }}>
            {children}
        </AuthContext.Provider>
    );
};

export default AuthProvider;

auth.d.ts

export type User = {
    auth: boolean;
    currentUrl: string;
}

export type AuthContextType = {
    user: User;
    updateAuth: () => void;
    updateUrl: (url: string) => void;
}

export type LoginCredentials = {
    email: string;
    password: string;
}

Login.tsx

const { updateAuth } = useContext(AuthContext) as AuthContextType;
if (response.data) {
                updateAuth();
}
**App.tsx**

import AppRouter from "./routes/AppRouter";
import AuthProvider from "./components/AuthContext";

function App() {
  return (
      <AuthProvider>
        <AppRouter />
      </AuthProvider>
  );
}

export default App;
Tags:

2

Answers


  1. 0

    In the updateAuth function inside your AuthProvider component, you are using the state variable user directly to update its value. However, React’s state updates may be asynchronous, and when you use the state directly inside the function argument of setUser, it might not reflect the latest state.

    const updateAuth = () => {
    console.log("Hello, world!");
    setUser(prevUser => ({ ...prevUser, auth: !prevUser.auth }));
}

    Similarly, you can also apply this pattern in the updateUrl function:

    const updateUrl = (url: string) => {
    setUser(prevUser => ({
        ...prevUser,
        currentUrl: url,
    }));
}
    Login or Signup to reply.
  2. 0

    The issue you’re facing might be related to the asynchronous nature of the setState function in React. The useState hook’s setState function doesn’t guarantee an immediate update of the state, especially when the state update depends on the previous state.

    const updateAuth = () => {
    setUser(prevUser => ({ ...prevUser, auth: !prevUser.auth }));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search