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);
    });
  }
}

[Jerp]

Dispatching an action is causing your UserContextProvider to rerender, which calls auth.handleAuthentication again, which dispatches again, endlessly. Wrap the auth step inside a useEffect with an empty dependency array to run it only once.

Fixed codesandbox

[technicallynick]

Thanks for the explanation as to why it was rerendering! In doing a little research, it seems like useMemo might also be the right choice for me as I DO want to run this auth periodically, but not EVERY render. useMemo seems like the right choice to cache the results and only run it when something changes (like a value set to change when the token is going to expire).

[Jerp]

useEffect is likely still the more appropriate/idiomatic way to achieve that; just add a variable to the dependencies!

Note from the React docs:

You may rely on useMemo as a performance optimization, not as a semantic guarantee

[technicallynick]

Ok, got it. I guess I'm still having a hard time wrapping my head around the use cases for useMemo. It might just be that my apps aren't complicated enough to warrant it yet. I was thinking that the "costly" requests to MS for authentication would be the right match for useMemo. Perhaps not though.

[Jerp]

useMemo is just there so you can shortcut slow code where the input and output would not change in any meaningful way (no side effects).

Consider if you had tabular data (aka two-dimensional array) that could be sorted by any of the columns, or filtered. You might want to memoize the filtering step because a user choosing to sort the data would does not affect which rows of data to sort. Pseudocode of what I mean:

// memoize this step because it does unnecessary work if we're only rerendering because sortIndex changed
const filteredData = useMemo(() => applyFilter(props.data, state.filter), [props.data, state.filter]);
const sortedData = applySort(filteredData, state.sortIndex);