ππ₯³ Announcing #ReactLocation, a brand new router for React!
β³ Async Loaders & Elements
π Parallelized
β²οΈ Prefetching
π Caching
π 1st-class Integrated Search Params API
π Code-Splitting
β οΈ Error/Pending/Timing States
πͺ Nested Layouts
react-location.tanstack.com
#TanStack
β³ Async Loaders & Elements
π Parallelized
β²οΈ Prefetching
π Caching
π 1st-class Integrated Search Params API
π Code-Splitting
β οΈ Error/Pending/Timing States
πͺ Nested Layouts
react-location.tanstack.com
#TanStack
β³ Async Route Loaders & Elements
Routes can define data dependencies and the elements they render as asynchronous functions that will be guaranteed to resolve before rendering the next location. The suspense is palpable! π
Routes can define data dependencies and the elements they render as asynchronous functions that will be guaranteed to resolve before rendering the next location. The suspense is palpable! π
π Parallelized Loaders
"πΆ Don't go chasing waterfalls", not even the data-fetching ones!
Navigating through 3 loaders to a deep link out of the gate? By default, loaders and async elements for matched routes are all parallelized for efficiency. You can fetch serially, too π€·ββοΈ
"πΆ Don't go chasing waterfalls", not even the data-fetching ones!
Navigating through 3 loaders to a deep link out of the gate? By default, loaders and async elements for matched routes are all parallelized for efficiency. You can fetch serially, too π€·ββοΈ
π©βπ³ Prefetching
Placeholder spinners are the worst! To get rid of them, just turn on prefetching for individual <Link />s, all of them, or even prefetch manually with `useLoadRoute`. No more spinners. Basic Caching. Auto garbage collection. Win win win.
Placeholder spinners are the worst! To get rid of them, just turn on prefetching for individual <Link />s, all of them, or even prefetch manually with `useLoadRoute`. No more spinners. Basic Caching. Auto garbage collection. Win win win.
π Optional Built-in/External Caching
Out of the box, active and pending route data is cached while you navigate, so only changing UI triggers data fetching. BUT WAIT, you can also use RL's basic maxAge caching for more, OR you can even integrate RL with tools like #ReactQuery!
Out of the box, active and pending route data is cached while you navigate, so only changing UI triggers data fetching. BUT WAIT, you can also use RL's basic maxAge caching for more, OR you can even integrate RL with tools like #ReactQuery!
π 1st-class Integrated Search Params API
Search params are pure π₯-power when building apps so RL doesn't mess around. With 1st-class search param APIs everywhere, you'll *want* to put more state in the URL and your users will thank you for it every time they share or bookmark.
Search params are pure π₯-power when building apps so RL doesn't mess around. With 1st-class search param APIs everywhere, you'll *want* to put more state in the URL and your users will thank you for it every time they share or bookmark.
π Code-Splitting
Table Stakes here, but we have to mention it. Code Splitting is of course supported, and the coolest part about it is that any code-splitting you do in RL doesn't change anything about parallelization, prefetching, etc. Ahh tsss... split it. Split it real good!
Table Stakes here, but we have to mention it. Code Splitting is of course supported, and the coolest part about it is that any code-splitting you do in RL doesn't change anything about parallelization, prefetching, etc. Ahh tsss... split it. Split it real good!
β οΈ Error States
Things don't always go as planned, so if your loaders π© out, you can provide error elements to handle them. After all, everybody π©, right?!
Things don't always go as planned, so if your loaders π© out, you can provide error elements to handle them. After all, everybody π©, right?!
β° Pending States
Sometimes loaders can also be little π’, so pending states are a must. Time them for exactness to give a chance for that "suspense"-y feel, then fall back to the pending state. Heck, you can even force a pending state to show for a minimum amount of time!
Sometimes loaders can also be little π’, so pending states are a must. Time them for exactness to give a chance for that "suspense"-y feel, then fall back to the pending state. Heck, you can even force a pending state to show for a minimum amount of time!
πͺ Nested Layouts
Again, table stakes here, but we have to mention it. If you don't know the benefits of nested layouts yet... first of all, what router have you been using for the last 7 years? π But seriously, they're fantastic.
Again, table stakes here, but we have to mention it. If you don't know the benefits of nested layouts yet... first of all, what router have you been using for the last 7 years? π But seriously, they're fantastic.
πͺ Batched Navigation/Render
Putting state in the URL and async navigating can get a little πΆοΈ for the URL and rerendering in large apps. "Routings a batch" π.
RL batches both URL updates and rerenders to your app to suss out every last bit of performance it can.
Putting state in the URL and async navigating can get a little πΆοΈ for the URL and rerendering in large apps. "Routings a batch" π.
RL batches both URL updates and rerenders to your app to suss out every last bit of performance it can.
There's a handful of other awesome features like:
- Optional route filtering/ranking
- JSX-style routes for the "clean code"-ers
A a few more that are on the way, mainly completing the SSR story + examples
- Optional route filtering/ranking
- JSX-style routes for the "clean code"-ers
A a few more that are on the way, mainly completing the SSR story + examples
We forgot to add (and document apparently) that React Location also ships with the beloved usePrompt() and <Prompt> hook and component!
The docs are now up to date :)
react-location.tanstack.com/docs/api#useprβ¦
The docs are now up to date :)
react-location.tanstack.com/docs/api#useprβ¦
Also, did you know that React Location is only 7.2kb gzipped? π€―
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
