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
}

<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

useRouteContext

and

select

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>

// 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!

TanStack•10mo 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
}

<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

useRouteContext

and

select

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>

// 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!

expose route context select

Similar Threads

expose route context select

Similar Threads

Similar Threads

Similar Threads