TanStack•15mo ago•

5 replies

brilliant-lime

useMatchRoute but don't re-render on every state change

One thing (among many) that is awesome about tanstack/router is that most hooks can be used in a way that minimizes re-renders. For example:

const pathname = useLocation({ select: l => l.pathname }) // only re-renders when pathname changes
const foo = useSearch({ select: s => s.foo }) // only re-renders when foo changes
const router = useRouter() // never re-renders

const pathname = useLocation({ select: l => l.pathname }) // only re-renders when pathname changes
const foo = useSearch({ select: s => s.foo }) // only re-renders when foo changes
const router = useRouter() // never re-renders

But there is one pattern that I'm not really sure how to do without re-rendering on almost every router state change:

const match = useMatchRoute()
const isMatch = match({ to: '/a' }) || match({ to: '/b', fuzzy: true })

const match = useMatchRoute()
const isMatch = match({ to: '/a' }) || match({ to: '/b', fuzzy: true })

It seems to me that

useMatchRoute

useMatchRoute

must always re-render so that

match

match

gets re-executed (and it doesn't know what

match

match

is going to be called with).

match

match

is great because it's way more type-safe than (for example) just doing string comparisons with

pathname

pathname

const pathname = useLocation({ select: l => l.pathname })
const isMatch = pathname === '/a' || pathname.startsWith('/b')

const pathname = useLocation({ select: l => l.pathname })
const isMatch = pathname === '/a' || pathname.startsWith('/b')

Or even better

const isMatch = useLocation({
  select: l => l.pathname === '/a' || l.pathname.startsWith('/b')
})

const isMatch = useLocation({
  select: l => l.pathname === '/a' || l.pathname.startsWith('/b')
})

This last example with

useLocation

useLocation

causes way fewer re-renders than the equivalent with

useMatchRoute

useMatchRoute

, but it's not as typesafe.

How would you compute

isMatch

isMatch

in a way that is both type-safe and minimizes re-renders?

There is something kind of close with

useMatch

useMatch

but not quite the same

useMatch({ from: '/a', shouldThrow: false, select: Boolean })

useMatch({ from: '/a', shouldThrow: false, select: Boolean })

But it's missing a couple things:
-

fuzzy:true

fuzzy:true

is pretty handy, if I want to match

/foo/a

/foo/a

and

/foo/b

/foo/b

but there is no

route

route

at /foo,

fuzzy:true

fuzzy:true

can do it, but

useMatch

useMatch

cannot
- the ability to specify more than just

to

to

(like search, params, ...)

TanStack•15mo ago•

5 replies

brilliant-lime

useMatchRoute but don't re-render on every state change

One thing (among many) that is awesome about tanstack/router is that most hooks can be used in a way that minimizes re-renders. For example:

const pathname = useLocation({ select: l => l.pathname }) // only re-renders when pathname changes
const foo = useSearch({ select: s => s.foo }) // only re-renders when foo changes
const router = useRouter() // never re-renders

const pathname = useLocation({ select: l => l.pathname }) // only re-renders when pathname changes
const foo = useSearch({ select: s => s.foo }) // only re-renders when foo changes
const router = useRouter() // never re-renders

But there is one pattern that I'm not really sure how to do without re-rendering on almost every router state change:

const match = useMatchRoute()
const isMatch = match({ to: '/a' }) || match({ to: '/b', fuzzy: true })

const match = useMatchRoute()
const isMatch = match({ to: '/a' }) || match({ to: '/b', fuzzy: true })

It seems to me that

useMatchRoute

useMatchRoute

must always re-render so that

match

match

gets re-executed (and it doesn't know what

match

match

is going to be called with).

match

match

is great because it's way more type-safe than (for example) just doing string comparisons with

pathname

pathname

const pathname = useLocation({ select: l => l.pathname })
const isMatch = pathname === '/a' || pathname.startsWith('/b')

const pathname = useLocation({ select: l => l.pathname })
const isMatch = pathname === '/a' || pathname.startsWith('/b')

Or even better

const isMatch = useLocation({
  select: l => l.pathname === '/a' || l.pathname.startsWith('/b')
})

const isMatch = useLocation({
  select: l => l.pathname === '/a' || l.pathname.startsWith('/b')
})

This last example with

useLocation

useLocation

causes way fewer re-renders than the equivalent with

useMatchRoute

useMatchRoute

, but it's not as typesafe.

How would you compute

isMatch

isMatch

in a way that is both type-safe and minimizes re-renders?

There is something kind of close with

useMatch

useMatch

but not quite the same

useMatch({ from: '/a', shouldThrow: false, select: Boolean })

useMatch({ from: '/a', shouldThrow: false, select: Boolean })

But it's missing a couple things:
-

fuzzy:true

fuzzy:true

is pretty handy, if I want to match

/foo/a

/foo/a

and

/foo/b

/foo/b

but there is no

route

route

at /foo,

fuzzy:true

fuzzy:true

can do it, but

useMatch

useMatch

cannot
- the ability to specify more than just

to

to

(like search, params, ...)

useMatchRoute but don't re-render on every state change

Similar Threads

useMatchRoute but don't re-render on every state change

Similar Threads

Similar Threads

Similar Threads