I have my App.js re-rendering multiple times. Is there a way to optimize that? <React.StrictMode>
is already removed. I also tried without useMemo
and having these 3 variables in the array for useEffect
.
export default function App() {
const { instance, accounts, inProgress } = useMsal();
const callLogin = useMemo(() => {
return () => {
console.log("Inside callLogin");
const isAuthenticated = accounts.length > 0;
if (!isAuthenticated && inProgress === InteractionStatus.None) {
instance.loginRedirect();
}
};
}, [instance, accounts, inProgress]);
console.log("I'm inside App.js!");
useEffect(() => {
console.log("App.js useEffect");
callLogin();
}, [callLogin]);
return
(<SomeComponent />)
}
This is what it looks like after one hard clean refresh. You can ignore Kendo warnings.
This is how App.js is called in index.js
ReactDOM.render(
<MsalProvider instance={msalInstance}>
<App />
</MsalProvider>,
document.getElementById('root')
);