useContext seems unexpectedly slow (with just about ~100 useContext calls) #1821

Bersaelor · 2023-07-24T13:52:02Z

Describe the bug

I feel like I have a rather average use case, a home page with ~50 cells of content, each making calls to the shared AppContext using useContext.

Now a full reload on my M1 Mac takes ~90-120ms on an M1 Macbook, on a Samsung Phone about 6-10x that long.
At this point using react-router to re-render pages on the client feels sluggish to mobile users.

Now, when looking at the Performance in chrome, I can see that:
localhost:3000 full homepage reload, 124ms, of which 18.9% (25.9ms) is the lookup.
Deployed prod site , 92ms total, of which 9% ~ 9ms is 'le' which looks like the lookup.

The lookup function is this one

function lookup(owner, key) {
  return owner ? owner.context && owner.context[key] !== undefined ? owner.context[key] : lookup(owner.owner, key) : undefined;
}

when I open it in chrome-sources on dev it said the code spent 42ms just in this function.

Screenshot from chrome performance analysis:

Generally speaking, if I remove the content cells, the lookup bottleneck goes way.

The complete nested structure of our site is (Abbreviated):

even a single cell instead of 4 cells stil spends 5% of it's render time in an infinite lookup loop.

The complete nesting structure of our app would be:

// [root.tsx]
  return (
    <Html lang="en">
      <Suspense>
        <SSRContextProvider>
          <Head>
            <Body>
              <ThemeProvider>
                 <Routes>
                   <FileRoutes>

// (app).tsx
  return (
    <TrackingContextProvider>
      <ClientOnly>
        <AuthContextProvider>
          <AppContextProvider>
            <SearchDrawerProvider>
              <MainContainer>
                <MiddleContainer>
                  <Outlet />

(app)/(csr).tsx

  return <main>
    <Switch>
      <Match when={isAuthenticated() || isLogin()}>
        <Outlet />

// (app)/(csr)/index.tsx

  return (
    <Container >
      <Show ..> 
        <Grid>
          <Trending>

and

// Trending.tsx
  return (
    <Stack
      <Box>
        <Stack>
          <Suspense>
            <RecastCell> <- this is the one that is making the useContext lookup

Even a single cell instead of 4 cells stil spends 5% of it's render time i a very long stack trace about useContext

Total number of useContext calls was about 150, 100 to the AppContext, 50 to the AuthContext.

Your Example Website or App

https://app.letsrecast.ai/

Steps to Reproduce the Bug or Issue

go to https://app.letsrecast.ai/login
enter any email, login is free
click on any cell
start recording performance in chrome performance tools
click on the logo top left or the little collapse arrow on the detail page
see home page reload
stop chrome performance recording
see unexpectedly long 100ms to rerender the homepage

Expected behavior

Reloading a few cells in solid.js shouldn't take that long on modern hardware

Screenshots or Videos

Platform

OS: macOS ~100ms, Android-Mobile Samsung S9 ~800ms
Browser: Chrome
Version:
solid-start - 0.2.27
solid-js - 1.7.8
@suid/base - 0.8.2

Additional context

No response

The text was updated successfully, but these errors were encountered:

Bersaelor · 2023-07-24T13:58:16Z

This could also be an issue with solid-start / FileRouting, maybe the long lookup chain is caused by the leaf component cell and the Context Provider sitting in different folders in the file-route-tree.

ryansolid · 2023-07-25T21:49:40Z

There has been some talk about how to get the lookup to be faster. This isn't something I've experienced myself, but now that I have a reproduction I can take a look. There are a few ideas how we can significantly make an improvement here.

fabiospampinato · 2023-07-25T23:44:07Z

@ryansolid if you want a more controlled repro you can just call useContext in a loop inside a bunch of memos. The more memos you add the slower each lookup will be, while it should really be constant.

ryansolid · 2023-07-26T03:48:12Z

@ryansolid if you want a more controlled repro you can just call useContext in a loop inside a bunch of memos. The more memos you add the slower each lookup will be, while it should really be constant.

I know you already have a solution for this. That is what people were talking to me about. Cloning downwards instead of looking upwards. But if I understand correctly you found a happy middle ground?

fabiospampinato · 2023-07-26T10:04:53Z

@ryansolid What I'm doing is the following:

A context lookup is just a lookup in the "context" object that each owner points to, so it always takes a constant amount of time (https://github.com/vobyjs/oby/blob/553b3e8c9d933f869581da53cc97c20502c9cc0b/src/methods/context.ts#L17)
Each owner just points to the context object of its owner, directly (https://github.com/vobyjs/oby/blob/553b3e8c9d933f869581da53cc97c20502c9cc0b/src/objects/observer.ts#L18)
Except for a special kind of owners, context owners, which clone their parent's context and extend it (https://github.com/vobyjs/oby/blob/553b3e8c9d933f869581da53cc97c20502c9cc0b/src/objects/context.ts#L24)
Lastly the ability to write to the current context directly is deleted, because the mutation wouldn't automatically be visible to children also, instead each time a new context owner is created, which wraps a function, like other owners do (https://github.com/vobyjs/oby/blob/553b3e8c9d933f869581da53cc97c20502c9cc0b/src/methods/context.ts#L21).

Lookups are basically the fastest they can be, and memory usage is basically as low as it can be for every owner except context owners, creating a context owner takes a slight hit once because the parent context has to be cloned.

ryansolid · 2023-08-09T17:37:04Z

Thanks @fabiospampinato for the suggestions. 1-3 were straightforward. 4 was fine for all current APIs but I had to do some hacky garbage to support the now deprecated onError which does mutate context. I'm glad it is already deprecated and people shouldn't be using it anymore as it brings in extra code and is de-optimized now. But it is completely tree-shakeable and that is at the benefit of everything else being optimized.

Bersaelor changed the title ~~useContext seems to slow down page-reloading in client (with just about ~100 useContext calls)~~ useContext seems unexpectedly slow (with just about ~100 useContext calls) Jul 25, 2023

ryansolid added the enhancement New feature or request label Jul 25, 2023

ryansolid closed this as completed in 792e7de Aug 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

useContext seems unexpectedly slow (with just about ~100 useContext calls) #1821

useContext seems unexpectedly slow (with just about ~100 useContext calls) #1821

Bersaelor commented Jul 24, 2023 •

edited

Loading

Bersaelor commented Jul 24, 2023

ryansolid commented Jul 25, 2023

fabiospampinato commented Jul 25, 2023 •

edited

Loading

ryansolid commented Jul 26, 2023

fabiospampinato commented Jul 26, 2023 •

edited

Loading

ryansolid commented Aug 9, 2023

useContext seems unexpectedly slow (with just about ~100 useContext calls) #1821

useContext seems unexpectedly slow (with just about ~100 useContext calls) #1821

Comments

Bersaelor commented Jul 24, 2023 • edited Loading

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Platform

Additional context

Bersaelor commented Jul 24, 2023

ryansolid commented Jul 25, 2023

fabiospampinato commented Jul 25, 2023 • edited Loading

ryansolid commented Jul 26, 2023

fabiospampinato commented Jul 26, 2023 • edited Loading

ryansolid commented Aug 9, 2023

Bersaelor commented Jul 24, 2023 •

edited

Loading

fabiospampinato commented Jul 25, 2023 •

edited

Loading

fabiospampinato commented Jul 26, 2023 •

edited

Loading