Performance issues after msal-react update caused by a lot of hook changes

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.22.1

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.3.1

Description

Since upgrading from @azure/msal-browser v2.22.0 to v2.22.1 and from @azure/msal-react v1.3.0 to v1.3.1 my React App is terribly slow on each navigation. With some investigation (using why-did-you-render) I saw that a top-level component does a lot of re-renderings because the useIsAuthenticated-hook changes several times (I counted 45 times). The actual value of the hook does not change (only the ref of the object stored in the MsalContext changes). The same is true for other subcomponents that are using useMsal. Before updating those packages each of those hooks only changed one time per navigation (I should mention that I am using react-router(-dom) for routing).

Here the diff output reported by why-did-you-render (as mentioned such a ref change without value change happens several times):

Error Message

No response

Msal Logs

No response

MSAL Configuration

{
  auth: {
    authority: `https://login.microsoftonline.com/${TENANT_ID}`,
    clientId: CLIENT_ID,
    navigateToLoginRequestUrl: false,
    postLogoutRedirectUri: '/auth/logout',
    redirectUri: '/',
  },
  cache: {
    cacheLocation: 'localStorage',
  },
};

Relevant Code Snippets

export function Pages() {
  const isAuthenticated = useIsAuthenticated();

  return (
    <Routes>
      <Route element={<LogoutPage />} path="auth/logout" />
      <Route element={<LoginPage />} path="auth" />
      <Route element={<LandingPage />} path="welcome" />
      <Route element={isAuthenticated ? <AuthorizedPagesWithSubRoutes /> : <LandingPage />} path="/*" />
    </Routes>
  );
}

Reproduction Steps

1. Navigate on a page that uses a @azure/msal-react-hook

Expected Behavior

The hooks of @azure/msal-react should not change so many times.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

@azure/msal-browser 2.22.0 @azure/msal-react 1.3.0

Source

External (Customer)

[jasonnutter]

@matzehecht Thanks, we’ll investigate and follow up if we need more information.

[matzehecht]

Thanks for the quick response. I am happy to test this as soon as the fix is released.