flat-fuchsia

What is the current way to not trigger whole tree reload (as parent) on sub-tree URL change?

Question in topic. They way so that it only triggers the reload of the changed part/changed route/new route, instead of the whole tree?

10 Replies

solid-orange•2y ago

what do you mean by subtree URL change? does it mean you navigate from /product/category/1 to /product/category/2 ?

flat-fuchsiaOP•2y ago

@Manuel Schiller yes Currently your example rerenders/reloaders all the parent routes, instead of only the one that went from /1 to /2 Bumping the question 😅🙈

fair-rose•2y ago

This could be related to this: https://discord.com/channels/719702312431386674/1202008475811717210 But yeah, I'd assume it would work similarly to how you described too

genetic-orange•2y ago

So, this depends on what you are using and subscribing to in your own code To put it in perspective, if you have a const state = useRouterState() in your root, then you're going to rerender a lot. Which is why the useRouterState({ select: s => anything }) option is there select makes it fine-grained Everywhere internally in the library, we're being as specific as possible, but outside of the library, there's not really a great way to enforce that you're not doing something too coarse grained So I would first look through your router hook usages and check that you're not subscribed to something that's changing all the time.

fair-rose•2y ago

interesting.... is there more information about how to use the selectors available somewhere? theres not a lot of info on how to use them in the docs e.g. if I did the following:

  const { id } = useSearch({ from: '/app/dashboard', select: () => ({ id: '' })});

  const { id } = useSearch({ from: '/app/dashboard', select: () => ({ id: '' })});

Would this component only re-rerender when id changes, and not when any search params change?

genetic-orange•2y ago

Correct We definitely need to add more docs around this

fair-rose•2y ago

whats the difference between:

  const { id } = useSearch({ from: '/app/dashboard', select: () => ({ id: '' })});

  const { id } = useSearch({ from: '/app/dashboard', select: () => ({ id: '' })});

and

  const { id } = useSearch({ from: '/app/dashboard', select: ({id}) => ({ id })});

  const { id } = useSearch({ from: '/app/dashboard', select: ({id}) => ({ id })});

genetic-orange•2y ago

The first one will return { id: '' } and never rerender it's component The second one will return { id: theSearchIdThatMightChange } and rerender it's component when that ID changes

fair-rose•2y ago

ah ok, thought so.

flat-fuchsiaOP•2y ago

Interesting I will try this. @Tanner Linsley I have also met with situation when the /1 to /2 (would cache by default?) and then not re-trigger the the route loader when the use re-visits the route. Is it similiar case?

Gaming

Programming

What is the current way to not trigger whole tree reload (as parent) on sub-tree URL change?

Did you find this page helpful?