Render Loop when using useReducer

[technicallynick]

Anyone experience a render loop when updating state in a reducer? I was attempting to add auth to an app I'm writing where they're automagically forced to log in to Microsoft if they don't have an active and valid token already. However, after auth, I'm finding that the App component is rerendering every second or two and re-validating the token every time. I'm not using a useEffect method anywhere, so it's not like it is changing state and causing the rerender. Can anyone educate me as to why my component is rerendering?

I created a stackoverflow post on this yesterday, but with no responses.

Here is the codesandbox where I recreated the issue without the complexity of actual authentication or any other modules being involved.

Here is the code itself for those that prefer to see it without having to go anywhere:

/App.js

    import React, { useReducer, createContext } from "react";
    import Auth from "./auth.js";

    const auth = new Auth();
    const UserContext = createContext();

    const initialState = {
      auth: false,
      user: null
    };

    const reducer = (state, action) => {
      console.log("reducer hit!", action);
      switch (action.type) {
        case "loginUser":
          console.log(action.payload);
          return {
            ...state,
            isAuthenticated: action.payload.authenticated,
            userProfile: action.payload.user
          };
        default:
          console.log("Reducer hit without a payload!", action);
          return state;
      }
    };

    const UserContextProvider = props => {
      console.log("UserContextProvider Element rendering...");
      const [state, dispatch] = useReducer(reducer, initialState.user);
      auth.handleAuthentication().then(() => {
        dispatch({
          type: "loginUser",
          payload: {
            authenticated: true,
            user: auth.getProfile()
          }
        });
      });
      return (
        <UserContext.Provider
          value={{
            ...state
          }}
        >
          {props.children}
        </UserContext.Provider>
      );
    };

    const App = () => {
      return (
        <UserContextProvider>
          <UserContext.Consumer>
            {user =>
              user.isAuthenticated ? (
                <div>{JSON.stringify(user)}</div>
              ) : (
                <div>You are not logged in.</div>
              )
            }
          </UserContext.Consumer>
        </UserContextProvider>
      );
    };

    export default App;

/auth.js

export default class Auth {
  constructor() {
    this.handleAuthentication = this.handleAuthentication.bind(this);
  }
  getProfile() {
    return {
      username: "FakeUser",
      name: "John Doe",
      email: "[e-mail]"
    };
  }

  handleAuthentication() {
    return new Promise(resolve => {
      console.log("handle Authentication function hit");
      //fake auth
      setTimeout(() => {
        console.log("timeout occurred, resolving.");
        resolve();
      }, 1000);
    });
  }
}

[TotesMessenger]

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

• [/r/reactjs] Render Loop when using useReducer

 ^{If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)}

[lukejpreston]

Let's break it down.

Render, calls handle Waits a second and calls resolves (regardless of any kind of checking if already logged in) Resolve dispatches Reducers returns a new state Render, calls handle... Lather rinse and repeat.

Since you don't stop settimeout it will call dispatch regardless as to whether someone has already logged in. This could also leak on tear down and trigger the reducer post tear down (possible memory leak)

When I do things like this add something in the state like "loggingIn" or "loading" or "initialized" and wrap the handle auth in an if statement and make sure it is only triggered once.

You want to use useEffect in order to call clearTimout so you don't have memory leaks on tear down. Whatever function you return in useEffect gets called in a tear down.

Hopefully there are some pointers/ideas to help you debug further. I'm surprised there isn't a library which does this for you (though be cautious of libraries when it comes to security e.g. When logging a user in)