How to update state when using React Context?

Question

I am using React Context to pass in the state and setState like this

const [authContext, setAuthData] = useState({
    isAuthenticated: false,
    userID:"-1",
    email:"test",
    name:"test"
  });

<AuthContext.Provider value={[authContext,setAuthData]}>
          <Router>
            <NavbarMenu />
              <div className="AllElements">
                  <Switch>
                    <Route exact path="/" component={HomePage} />
                    <Route component={Routes} />
                  </Switch>
              </div>
          </Router>
        </AuthContext.Provider>

and in another component, I retrieve it like this

const [authContext, setAuthData ] = useContext(AuthContext);
const { isAuthenticated } = authContext;

I call setAuthData like this whenever I want to update authContext

const HomePage = () => {
if(data && data.login && data.login.token){
        console.log("Data token exists");
        setAuthData(() => [{
            isAuthenticated: true,
            userID:data.login.id,
            email:data.login.email,
            name:data.login.name
        }]);
    } 

 return (<div><p>test</p></div>);
};
export default HomePage;

However, once it hits setAuthData, everything inside the if {} gets called multiple times. I keep seeing multiple "Data token exists" in the console until it errors out to Maximum update depth exceeded

Why not pass a function(to update state in the parent component itself) instead of passing the setState directy? — Ramesh Reddy
– Ramesh Reddy, Commented Feb 10, 2020 at 7:54
Why are you returning an array inside setAuthData in homepage comp? — Ramesh Reddy
– Ramesh Reddy, Commented Feb 10, 2020 at 7:59
Because I need to reuse AuthContext in other components as well. I don't want to just pass the same function as a prop to every component that I want to reuse that in. — user2775042
– user2775042, Commented Feb 10, 2020 at 8:00

Peter Ambruzs · Accepted Answer · 2020-02-10 08:04:25Z

1

You get an infinite loop because setAuthData call changes authContext. When authContext changes HomePage would re-render and it trigger setAuthData again.

Make sure you call setAuthData only once for example:

const HomePage = () => {
  React.useEffect(() => {
    if (data && data.login && data.login.token) {
      console.log("Data token exists");
      setAuthData(() => [
        {
          isAuthenticated: true,
          userID: data.login.id,
          email: data.login.email,
          name: data.login.name
        }
      ]);
    }
  }, [data]);

 return (<div><p>test</p></div>);
};

answered Feb 10, 2020 at 8:04

Peter Ambruzs

8,2214 gold badges33 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2020-02-10 08:05:41Z

0

I guess you should do the state update in useEffect hook and pass the second parameter to react only when it updates:

const HomePage = () => {

    useEffect(()=>{
        //if(data && data.login && data.login.token){
            console.log("Data token exists");
            setAuthData(() => [{
                isAuthenticated: true,
                userID:data.login.id,
                email:data.login.email,
                name:data.login.name
            }]);
       // } 
     }, [data]); //<-----second param if it has any changes then run effect
     return (<div><p>test</p></div>);

};

answered Feb 10, 2020 at 8:05

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Ramesh Reddy · Accepted Answer · 2020-02-10 08:09:36Z

This might be the issue:

const HomePage = () => {
if(data && data.login && data.login.token){
        console.log("Data token exists");
        setAuthData(() => [{
            isAuthenticated: true,
            userID:data.login.id,
            email:data.login.email,
            name:data.login.name
        }]);
    } 

 return (<div><p>test</p></div>);
};
export default HomePage;

Your updated state should be an object not an array based on the previous state in parent component so change the returned value to this:

const HomePage = () => {
if(data && data.login && data.login.token){
        console.log("Data token exists");
        setAuthData(() => ({
            isAuthenticated: true,
            userID:data.login.id,
            email:data.login.email,
            name:data.login.name
        }));
    } 

 return (<div><p>test</p></div>);
};
export default HomePage;

As described in peter's answer you should also use the useEffect hook to stop the update cycle.

Collectives™ on Stack Overflow

How to update state when using React Context?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related