I’ve inherited a project that is using React 16 much to my dismay 😀 and am finding that I’m unable to access my context on the apps initial load. Once making saves to the codebase and the app hot-reloading then it works as expected.

App.js

export const RequestManagerContext = createContext(null);

const App = () => {
  const [requestManager, setRequestManager] = useState(null);
  useEffect(() => {
    setRequestManager(new RequestManager())
  }, []);
  return (<div className="App">
      {
        !requestManager ? 'loading' : <LocalizationProvider dateAdapter={AdapterDayjs}>
        <ThemeContext.Provider value={{ theme, changeTheme }}>
          <RequestManagerContext.Provider value={requestManager}>
            <ThemeProvider theme={theme}>
              <CssBaseline />
              <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/icon?family=Material+Icons"
              />
              <ErrorBoundary>
                <Router />
                {renderLocalStorageBanner()}
              </ErrorBoundary>
            </ThemeProvider>
          </RequestManagerContext.Provider>
        </ThemeContext.Provider>
      </LocalizationProvider>
      }
    </div>
  );
};

Trying to digest the context

import { RequestManagerContext } from './App'

class PrivateRoute extends React.Component {
  static contextType = RequestManagerContext;
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      isAuthenticated: false,
      isAdmin: false,
    };
  }

  componentDidMount = async () => {
    console.log(this.context); // {}
  };

  return (<div className="App">
      {
        !requestManager ? 'loading' : <LocalizationProvider dateAdapter={AdapterDayjs}>
        <ThemeContext.Provider value={{ theme, changeTheme }}>
          <RequestManagerContext.Provider value={requestManager}>
            <ThemeProvider theme={theme}>
              <CssBaseline />
              <link
                rel="stylesheet"
                href="https://fonts.googleapis.com/icon?family=Material+Icons"
              />
              <ErrorBoundary>
                <Router />
                {renderLocalStorageBanner()}
              </ErrorBoundary>
            </ThemeProvider>
          </RequestManagerContext.Provider>
        </ThemeContext.Provider>
      </LocalizationProvider>
      }
    </div>
  );
};

The issue is, this.context when initially loading the app returns an object.

I will also say, the logic gate of: requestManager ? 'loading' and storing this in useState was just incase I could stop the components from rendering until we have a value for the requestManager