React Context API state update leads to infinite loop

Question

I am trying to add Authentication to my app and maintaining Auth State using React Context API.

I am calling my api using a custom hook use-http.

import { useCallback, useReducer } from 'react';

function httpReducer(state, action) {
  switch (action.type) {
    case 'SEND':
      return {
        data: null,
        error: null,
        status: 'pending',
      };
    case 'SUCCESS':
      return {
        data: action.responseData,
        error: null,
        status: 'completed',
      };
    case 'ERROR':
      return {
        data: null,
        error: action.errorMessage,
        status: 'completed',
      };
    default:
      return state;
  }
}

function useHttp(requestFunction, startWithPending = false) {
  const [httpState, dispatch] = useReducer(httpReducer, {
    status: startWithPending ? 'pending' : null,
    data: null,
    error: null,
  });

  const sendRequest = useCallback(
    async requestData => {
      dispatch({ type: 'SEND' });
      try {
        const responseData = await requestFunction(requestData);
        dispatch({ type: 'SUCCESS', responseData });
      } catch (error) {
        dispatch({
          type: 'ERROR',
          errorMessage: error.response.data.message || 'Something went wrong!',
        });
      }
    },
    [requestFunction]
  );

  return {
    sendRequest,
    ...httpState,
  };
}

export default useHttp;

This is my Login page which calls the api and I need to navigate out of this page and also update my Auth Context.

import { useCallback, useContext } from 'react';

import { makeStyles } from '@material-ui/core';
import Container from '@material-ui/core/Container';
import LoginForm from '../components/login/LoginForm';
import useHttp from '../hooks/use-http';
import { login } from '../api/api';
import AuthContext from '../store/auth-context';
import { useEffect } from 'react';

const useStyles = makeStyles(theme => ({
  pageWrapper: {
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: theme.palette.background.default,
  },
  pageContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    flexGrow: '1',
  },
}));

function Login() {
  const authCtx = useContext(AuthContext);
  const { sendRequest, status, data: userData, error } = useHttp(login);

  const loginHandler = (email, password) => {
    sendRequest({ email, password });
  };

  if (status === 'pending') {
    console.log('making request');
  }

  if (status === 'completed' && userData) {
    console.log('updateContext');
    authCtx.login(userData);
  }

  if (status === 'completed' && error) {
    console.log(error);
  }

  const classes = useStyles();
  return (
    <div className={classes.pageWrapper}>
      <Container maxWidth="md" className={classes.pageContainer}>
        <LoginForm status={status} onLoginHandler={loginHandler} />
      </Container>
    </div>
  );
}

export default Login;

The login api -

export const login = async ({ email, password }) => {
  let config = {
    method: 'post',
    url: `${BACKEND_URL}/api/auth/`,
    headers: { 'Content-Type': 'application/json' },
    data: {
      email: email,
      password: password,
    },
  };
    const response = await axios(config);
    return response.data;
};

The Auth Context -

import React, { useState } from 'react';
import { useEffect, useCallback } from 'react';

import {
  getUser,
  removeUser,
  saveUser,
  getExpirationTime,
  clearExpirationTime,
  setExpirationTime,
} from '../utils/local-storage';

const AuthContext = React.createContext({
  token: '',
  isLoggedIn: false,
  login: () => {},
  logout: () => {},
});

let logoutTimer;

const calculateRemainingTime = expirationTime => {
  const currentTime = new Date().getTime();
  const adjExpirationTime = new Date(expirationTime).getTime();

  const remainingDuration = adjExpirationTime - currentTime;

  return remainingDuration;
};

const retrieveStoredToken = () => {
  const storedToken = getUser();
  const storedExpirationDate = getExpirationTime();

  const remainingTime = calculateRemainingTime(storedExpirationDate);

  if (remainingTime <= 60) {
    removeUser();
    clearExpirationTime();
    return null;
  }

  return {
    token: storedToken,
    duration: remainingTime,
  };
};

export const AuthContextProvider = ({ children }) => {
  const tokenData = retrieveStoredToken();

  let initialToken = '';
  if (tokenData) {
    initialToken = tokenData.token;
  }

  const [token, setToken] = useState(initialToken);

  const userIsLoggedIn = !!token;

  const logoutHandler = useCallback(() => {
    setToken(null);
    removeUser();
    clearExpirationTime();

    if (logoutTimer) {
      clearTimeout(logoutTimer);
    }
  }, []);

  const loginHandler = ({ token, user }) => {
    console.log('login Handler runs');
    console.log(token, user.expiresIn);
    setToken(token);
    saveUser(token);
    setExpirationTime(user.expiresIn);

    const remainingTime = calculateRemainingTime(user.expiresIn);

    logoutTimer = setTimeout(logoutHandler, remainingTime);
  };

  useEffect(() => {
    if (tokenData) {
      console.log(tokenData.duration);
      logoutTimer = setTimeout(logoutHandler, tokenData.duration);
    }
  }, [tokenData, logoutHandler]);

  const user = {
    token,
    isLoggedIn: userIsLoggedIn,
    login: loginHandler,
    logout: logoutHandler,
  };

  return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
};

export default AuthContext;

The problem is when I call loginHandler function of my AuthContext in Login Component, the Login component re-renders and this login function goes in an infinite loop. What am I doing wrong?

I am new to React and stuck on this issue since hours now.

Answer 1

I think I know what it is.

You're bringing in a bunch of component state via hooks. Whenever authCtx, sendRequest, status, data and error change, the component re-renders. Avoid putting closures into the state. The closures trigger unnecessary re-renders.

function Login() {
  const authCtx = useContext(AuthContext);
  const { sendRequest, status, data: userData, error } = useHttp(login);

Try looking for all closures that could be causing re-renders and make sure components don't depend on them.

Edit:

Ben West is right- you also have side effects happening during the render, which is wrong.

When you have something like this in the body of a functional component:

  if (status === 'completed' && userData) {
    console.log('updateContext');
    authCtx.login(userData);
  }

Change it to this:

useEffect(() => {
  if (status === 'completed' && userData) {
    console.log('updateContext');
    authCtx.login(userData);
   }
}, [status, userData]); //the function in arg 1 is called whenever these dependencies change

---

I made a bunch of changes to your code:

It's down to 2 files. The other stuff I inlined.

I'm not that familiar with useContext(), so I can't say if you're using it correctly.

Login.js:

import { useContext, useEffect } from 'react';

import { makeStyles } from '@material-ui/core';
import Container from '@material-ui/core/Container';
import LoginForm from '../components/login/LoginForm';
import AuthContext from '../store/auth-context';

const useStyles = makeStyles(theme => ({
  pageWrapper: {
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: theme.palette.background.default,
  },
  pageContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    flexGrow: '1',
  },
}));


function httpReducer(state, action) {
  switch (action.type) {
    case 'SEND':
      return {
        data: null,
        error: null,
        status: 'pending',
      };
    case 'SUCCESS':
      return {
        data: action.responseData,
        error: null,
        status: 'completed',
      };
    case 'ERROR':
      return {
        data: null,
        error: action.errorMessage,
        status: 'completed',
      };
    default:
      return state;
  }
}

function Login() {

  const [httpState, dispatch] = useReducer(httpReducer, {
    status: startWithPending ? 'pending' : null,
    data: null,
    error: null,
  });

  const sendRequest = async requestData => {
      dispatch({ type: 'SEND' });
      try {
          let config = {
            method: 'post',
            url: `${BACKEND_URL}/api/auth/`,
            headers: { 'Content-Type': 'application/json' },
            data: {
              email: requestData.email,
              password: requestData.password,
            },
          };

        const response = await axios(config);
        dispatch({ type: 'SUCCESS', responseData: response.data });
      } catch (error) {
        dispatch({
          type: 'ERROR',
          errorMessage: error.response.data.message || 'Something went wrong!',
        });
      }
    };

  const authCtx = useContext(AuthContext);

  const loginHandler = (email, password) => {
    sendRequest({ email, password });
  };

    useEffect(() => {

        if (httpState.status === 'pending') {
            console.log('making request');
        }
    }, [httpState.status]);

    useEffect(() => {
      if (httpState.status === 'completed' && httpState.data) {
        console.log('updateContext');
        authCtx.login(httpState.data);
      }

    }, [httpState.status, httpState.data]);

    useEffect(() => {
      if (httpState.status === 'completed' && httpState.error) {
        console.log(httpState.error);
      }

    }, [httpState.status, httpState.error]);

  const classes = useStyles();
  return (
    <div className={classes.pageWrapper}>
      <Container maxWidth="md" className={classes.pageContainer}>
        <LoginForm status={httpState.status} onLoginHandler={loginHandler} />
      </Container>
    </div>
  );
}

export default Login;

AuthContext.js:

import React, { useState } from 'react';
import { useEffect } from 'react';

import {
  getUser,
  removeUser,
  saveUser,
  getExpirationTime,
  clearExpirationTime,
  setExpirationTime,
} from '../utils/local-storage';

const AuthContext = React.createContext({
  token: '',
  isLoggedIn: false,
  login: () => {},
  logout: () => {},
});


const calculateRemainingTime = expirationTime => {
  const currentTime = new Date().getTime();
  const adjExpirationTime = new Date(expirationTime).getTime();

  const remainingDuration = adjExpirationTime - currentTime;

  return remainingDuration;
};

// is this asynchronous?
const retrieveStoredToken = () => {
  const storedToken = getUser();
  const storedExpirationDate = getExpirationTime();

  const remainingTime = calculateRemainingTime(storedExpirationDate);

  if (remainingTime <= 60) {
    removeUser();
    clearExpirationTime();
    return null;
  }

  return {
    token: storedToken,
    duration: remainingTime,
  };
};

export const AuthContextProvider = ({ children }) => {

    const [tokenData, setTokenData] = useState(null);
    const [logoutTimer, setLogoutTimer] = useState(null);

    useEffect(() => {

      const tokenData_ = retrieveStoredToken(); //is this asynchronous?

      if (tokenData_) {
        setTokenData(tokenData_);
      }
    }, []);


  const userIsLoggedIn = !!(tokenData && tokenData.token);

  const logoutHandler = () => {
    setTokenData(null);

    removeUser();//is this asynchronous?

    clearExpirationTime();

    if (logoutTimer) {
      clearTimeout(logoutTimer);
        //clear logoutTimer state here? -> setLogoutTimer(null);
    }
  };

  const loginHandler = ({ token, user }) => {
    console.log('login Handler runs');
    console.log(token, user.expiresIn);
    setTokenData({ token });
    saveUser(token);
    setExpirationTime(user.expiresIn);

    const remainingTime = calculateRemainingTime(user.expiresIn);

    setLogoutTimer(setTimeout(logoutHandler, remainingTime));
  };

  useEffect(() => {
    if (tokenData && tokenData.duration) {
      console.log(tokenData.duration);
      setLogoutTimer(setTimeout(logoutHandler, tokenData.duration));
    }
  }, [tokenData]);

  const user = {
    token: tokenData.token,
    isLoggedIn: userIsLoggedIn,
    login: loginHandler,
    logout: logoutHandler,
  };

  return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
};

export default AuthContext;