TanStackT
TanStack•8mo ago•
3 replies
dead-brown

expose route context select

Hi! I'm working on a big component and for perf reasons, I don't want to pass all recursive data top down but rather only the top data and each component is responsible for getting the right data:
<Example>
  {ids.map(id => <ExampleGroup key={id} id={id} />)}
</Example>

function ExampleGroup({ id }) {
  const group = useGroup(id)

  // do stuff like rendering other example groups
}

Now, this is trivial to do with useRouteContext and 
select
 but I don't want to couple these components to the framework. That did sound like a good usecase for dependency injection via react context:
// React Context Provider under the hood
<Example
  select={(cb) =>
    Route.useRouteContext({
      select: (context) => cb(context),
    })
  }
>
  {/* */}
</Example>

But this doesn't respect the rule of hooks, although it works.

Did anyone try a similar thing before, and how did you do it? Thanks!
Was this page helpful?