How to stop page refresh after okta token refresh after every 2 min

Question

import React from "react";
import { Route, Redirect, Switch } from "react-router-dom";
import { useOktaAuth } from "@okta/okta-react";
import { Superadmin } from "../../../../Application_Constants";
import { AuthPage } from "./AuthPage";
import { ErrorPage1 } from "../../errors/ErrorPage1";
import { makeStyles, useTheme } from "@material-ui/core/";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "../../redux/reducer";
import Header from "../../header/Header";

const AppWithRouterAccess = () => {
  const store = createStore(reducer, applyMiddleware(thunk));

  const theme = useTheme();
  const { authState, oktaAuth } = useOktaAuth();

  return (
    <Switch>
      {!authState.isAuthenticated ? (
        /*Render auth page when user at `/auth` and not authorized.*/

        <Route>
          <AuthPage />
        </Route>
      ) : (
        /*Otherwise redirect to root page (`/`)*/
        <Redirect from="/auth" to="/" />
      )}

      <Route path="/error" component={ErrorPage1} />

      {!authState.isAuthenticated ? (
        /*Redirect to `/auth` when user is not authorized*/
        <Redirect to="/auth/login" />
      ) : (
        <>
          {/* provider used to integrates redux store with react application */}
          {/* redux provides a centralized store to manage the state of application */}
          <Provider store={store}>
            <Header />
          </Provider>
        </>
      )}
    </Switch>
  );
};

export default AppWithRouterAccess;

This is AppWithRouterAccess.js file. authState.isAuthenticated is getting refresh because Okta token refreshes and my page is getting refreshed and store refreshes. How can I stop my Redux to get refreshed after authState.isAuthenticated updates. Redux store should not get updated.

Answer 1

The store is recreated each time AppWithRouterAccess renders for any reason. Create the store outside the component so it's instantiated only once.

const store = createStore(reducer, applyMiddleware(thunk));

const AppWithRouterAccess = () => {
  const theme = useTheme();
  const { authState, oktaAuth } = useOktaAuth();

  return (
    <Provider store={store}>
      <Switch>
        {!authState.isAuthenticated ? (
          <Route>
            <AuthPage />
          </Route>
        ) : <Redirect from="/auth" to="/" />
        }

        <Route path="/error" component={ErrorPage1} />

        {!authState.isAuthenticated
          ? <Redirect to="/auth/login" />
          : <Header />
        }
      </Switch>
    </Provider>
  );
};

Answer 2

A React component renders for only one of 2 reasons:

• its parent renders (thus rendering all its children)
• a state variable in the component is given a new value via its "set state function"

Now, note that hooks (i.e. functions named useXXX()) and have state variables so if your component uses a hook that has state variables and those state variables in the hook update, then your component will re-render (because resources in Hooks are considered part of the component that calls the hook).

So, is it that the useOktaAuth() component has state variables that are updating frequently, thus causing the above component to re-render?