Error: Cleaning up Network Manager

[jjordy]

React version (e.g., 16.8.5)
16.8.5
Concurrent mode yes/no
Yes
Describe the bug
A clear and concise description of what the bug is.
More of a question than a bug
I am getting an error
Error: Cleaning up Network Manager

The app is a basic create react app with route level code splitting although the error seems to be thrown on my dashboard page which is not split into a separate bundle. I'm not sure this is related at all honestly its just something i was investigating.

Any ideas what could cause this error to be thrown?

Here is a basic example of my tree.

// index.tsx

ReactDOM.render(
  <RestProvider>
    <SharedState initialState={initialState}>
      <ThemeProvider theme={defaultTheme}>
        <React.Fragment>
          <GlobalStyles />
          <App />
        </React.Fragment>
      </ThemeProvider>
    </SharedState>
  </RestProvider>,
  document.getElementById("root")
)


// App.tsx

    <Location>
      {({ location }) => (
        <SuspenseLoader>
          <NetworkErrorBoundary
            key={location && location.key}
            fallbackComponent={({ error }) => (
              <CustomNetworkErrorBoundary error={error} />
            )}
          >
            <Router>
              <AuthenticatedApp path="/*" />
              <InitializeApplication path="/init/:token" />
              <NoAccess path="/no-access" />
              <NotFound default />
            </Router>
          </NetworkErrorBoundary>
        </SuspenseLoader>
      )}
    </Location>

// AuthenticatedApp.tsx

const Dashboard = lazy(() => import("./pages/Dashboard"))
const ISIR = lazy(() => import("./pages/ISIR"))
const Settings = lazy(() => import("./pages/Settings"))

interface AuthenticatedProps extends RouteComponentProps {}

const Authenticated: React.FC<AuthenticatedProps> = () => {
  useTokenData()

  return (
    <Suspense fallback={<LoadingPlaceholder />}>
      <Layout>
        <Router>
          <Dashboard path="/" exact />
          <ISIR path="/isir/*" />
          <Settings path="/settings/*" />
          <NotFound default />
        </Router>
      </Layout>
    </Suspense>
  )
}

[jjordy]

Another note specifically what happens is when that when I browse the the problem page it works fine when i browse there but as soon as i make a code change or refresh the page it freezes during the suspense loading. and causes the tab to crash.

[jjordy]

After further investigation I do believe this is related to Code splitting I just need to figure out exactly what is causing it. I will try to put together an example to see if this is related to the library or specifically my code.

Thanks,

Jordy

[ntucker]

https://github.com/coinbase/rest-hooks/blob/master/src/state/NetworkManager.ts#L33

That error is sent as a rejection to any open promises when cleanup() is called. This happens on unmount of <RestProvider />.

So I believe the problem is your <RestProvider/> is unmounting, which will not maintain state.

I would say your best bet is probably not having the <RestProvider/> part of the code hotreload. Alternatively you could look into using redux https://resthooks.io/docs/guides/redux#docsNav and making sure your store persists and only the reducers are hot reloaded.

[jjordy]

Ok this makes sense do you think that would also cause the issue I'm seeing of it just freezing in the loading state and blowing up the tab either due to a memory leak / issue in my code or somewhere else?

[jjordy]

I created a reproduction and was unable to reproduce. This is something inside my code as i was able to deeply nest lazy loaded routes in conjunction with useResource with no freezing issues.

Sorry for the trouble Thanks for the insight.

[ntucker]

I would be interested to see if you could consistently reproduce this. It could be a bug in react, or an edge case in rest-hooks that could be ironed away.