What Is TanStack Router And Why I Love It
Вставка
- Опубліковано 29 чер 2024
- I love type safety, but have always been disappointed in the type safety of modern routers. That is until now. Tanstack Router is incredible at giving you a fully type safe router which makes coding so much nicer and easier. In this video I talk about what Tanstack Router is and how you can get started with it.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:30 - Overview
03:00 - Simple Example
05:39 - More Complex Example
#TanstackRouter #WDS #ReactJS
I'm really glad that you're focusing more on typescript related content!
Been thinking same
More TanStack videos!
I'm a maintainer for TanStack Table if you ever make a video about that, feel free to reach out.
Thank you so much for making this video! This is exactly what I was looking for.
A lot of the "verbosity" is felt due to meta-frameworks having file-based routing, which TSR also has ;) except it's not a meta-framework. It's just a generation step you can run/watch while developing or in CI that gives you same auto-codesplit file-based routing experience we're all used to. There are multiple examples for it already in the repo :)
Thanks Tanner. If I'm using something like NextJS which has file-based routing, or even with their new apps directory that has component based routing, will TanStack Router still be useful to me? Or is it more useful for people running React or another framework without a meta-framework on top?
People gonna think this is some random commenting 😮
@@zzzyyyxxx only really applicable if you are doing something custom… For now
Nice. I can't believe I missed this. That just makes me love this even more. You are killing it Tanner.
@@forestpark1166 stop simping bro this isn't the Kardashians
A simple object containing all the routes would also do the trick and is IMHO way simpler than those shenanigans.
That more “complex” example is actually what Remix and React router v6 do. You have loader and action (for submitting a form).
Great video! If you're mentioning TanStack, hopefully you can do a video about React-Query. That has been a game-changer for API handling and caching. Also, but not related, Preact Signals for React since that also seems like a big next step for React state handling.
Thank you for introducing us to this incredible and super practical tool. 👍
Personally, it makes me want to use it in my next React TypeScript project!
Thanks for cutting edge info
I'm excited for this
I have refactorings
[1] You could use implicit return from arrow function. Implicitly returning will also reduce nesting:
() => (
...
)
instead of
() => {
return (
...
)
}
But, with braces and explicit return, you can put code before the return statement if you need to.
[2] As you are not using `this` in the function body, you can use shorthand syntax for defining an object method:
component() {
return ...
}
instead of
component: () => {
return ...
}
@6:28
async loader() {...}
instead of
loader: async () => {...}
Thank you very much
Hi Kyle... as always your video content is great. This message is just to let you know that this particular video has the audio volume lower than usual. Please, the aim here is not to be critical... just to bring the issue to your attention. Thank you for always bringing good content and putting so much effort into it.
It really looks awesome!
I was very skeptical about full type support for routing but the way they did it is actually genius! Can't believe I haven't thought of it
However - I can't help but wonder if maybe this is not scalable enough, as it forces you to have one place with ALL of your route definitions and a singular interface declaration with the type. For big apps you would typically want to have different part of the app define their own route, which might be managed by different teams and even in different repositories.
Tanner is a blessing man, I also heavily rely on the react-query library.
Then you should sponsor him
@@AmineAmine-qw4xx lol
Been on beta38 for about a week now, and I've loved the useSearch hook to access Objects from the query-params and maintaining referential equality.
I can't wait to go all in once Tanner and team are done with documentation. Code-splitting is something I'm still waiting on examples for.
Hey bro, Love your content by the way. I'm graduating with a Cs Degree and would appreciate great sources for tech news if young wouldn't mind sharing. Like which website/ news sites would you recommend for staying up to date / staying informed with new innovative technologies. Would greatly appreciate it!! Keep up the great work bro, you've helped me a bunch!!!
everyday a new tool . PLEASE leave me alone with my already known knowledge...
Please more typescript related content thanks!
useful content ❤
TanStack also made React Query, which is a really good cache system. Glad to see they're working on a cool routing system now.
The coolest part for me is the support for search params. Definitely an aspect I'v struggled with in the past with React.
Lol, what's up with all that hate in the comments. I am invested in Next routing atm but this seems actually great, having typesafety on the routes is something I would love to have, the search params stuff was also quite interesting.
Wow all this for just routing when all I want to do is to simply use the "a" tag in html to navigate pages. No wonder Sveltekit is getting a lot of love. Great video Kyle! I love watching you always and learning a lot. Keep up the good work still 👊🏿
Well, that's why nextjs is so amazing. It's basically like svelte, no hard routing. You create a file inside the pages folder and the route will be automatically created.
@@eduardoantonioolmedomojica5438 Not sure if OP mentions it yet (still watching right now), but TSR has file-based route generation just like your fav meta-frameworks, but without being a framework.
@@tannerlinsley that cool if you dont need to use ssr or ssg clearly, i wont be using nextjs only for routing haha, it's nice to know that tho, thanks
Yes it's ridiculous! React router is much simpler. Next is great too but not useable in an electron app
Make a tutorial about how to learn typescript with react for those who knows react
Jack Harrington has a bunch of good react TS videos. Suggest checking his channel out
@@honecode2120 thanks mate
I requested type safe routes over at the react router repo but the remix team turned it down within an hour stating it’s impossible
...And here I haven't even begun learning React.
Please make a video on how to do file manipulation using JS, and cover stuff like Blob, File & FileReader. Basically the whole manipulating binary files part.
Love you Boss
Nice!
جزاك الله خيراً.
Make a crash course for typescript with nextjs pleasee
Cool!
Wow 🔥
I personally prefer what remix is doing with routing.
you're the best
Whats the difference between this and react navigation and using enums as the possible screens it can navigate to? Is this just a js vs ts thing?
Your course on JS are great as I just saw your Videos TOC on your sites, btw,
Do you teach about api manipulation using JS too in your JS courses, and are your JS courses current in sync with latest in JS, consider this a pre sale qualifier 😀❤️
Yes and yes. This course is very in depth and entirely up to date.
You love everything
JavaScript library developers having a great time reinventing all the things, that invented by 2005.
I decide to use it last week but it is still missing some documention
React query tutorial we will love it sir
Can you do a video of Wundergraph
can u make nextJS typescript tailwind project?
Unfortunately there is still no option to set a state for the next route. A success or error message for example, and it's something I already have in some projects using React Router.
Cool
Fantastic video! LMK if you want me to be a guest.
I will definitely reach out if I ever decide to do interviews on my channel.
hey Kyle can you please do MERN stack setup tutorial pls? i know you did it but its from 3years ago and some things change didnt work for me
thanks again
Please can this be used for large project on production level?
actually you can split your routes into multiple files, which is something that most react developers don't know
Hi Kyle , i've doing tanstack for my recent project and while implimenting TanStackDevtools with ts its router prop keep showing error '#private' must be include , i'm new to it and ts can you plz help me out with this 🙏🙏🙏
Don't forget to give credit to Tanner Linsley.
Kyle, please read my comment
So much better than file based Next JS router!
You got any tutorials on setting up the current version of React and TS with "@aliases"? Nothing I have tried (for days) from every single tutorial worked. And others are having the same issues, and nobody has a working solution. It's as if React went out of their way to prevent aliases.
worried about type safety in routes, me writing my own SSG and all my routes are correct at compile time
Any idea when this will be out of beta?
@6:42
You should show something better than 'Oh crap'. A better error message and an action like 'Retry'.
how to get location in tanstack router?
Hi I m your big fan .why don't to make video on node js like rabbit mq streaming, events emitters, cluster, and some scalable concept like sending a mail to 10k user at time, what happen if 10k user hit same api in node js .. these are interesting topic please cover
He is mostly FE guy
i think react route dom v6.4 is also doing the same thing
Yes, in 5 lines of code. TanStack router is ultra complex to configure just for type safety, pfff... I will rather do that manully...
@@zlackbiro If you choose to "do it manually", make sure it uses inference everywhere, doesn't typecast manually anywhere and works without a code-generation step. Then I'd be happy to have a discussion with you about "complexity".
This video is too early, need a follow up video for this once that goes to v1
Excited
@0:01, wrong TypeScript's logo. It has no rounded corners, and the text 'TS' in the logo is not in the bottom right corner. JS logo does not have rounded corners, but TS logo has. Even the font is different.
Query string?
Blink once and there's a new framework.
100% Dan is watching this video because he's almost all the time online
Still in beta since a while. Not interested in features that are not production ready. Maybe i will see it later.
Why you need to add and learn new stuff every so often. Basic things should be in basic standard. If js was maintained and developed property there would be no need for all these independent innovations chaos, frameworks, plugins.
Too wide choice is a true cancer.
No wonder this space bounces all over the place repeating the same trade offs.
I want one full simple thing with complete tooling.
I would rather go through pain of learning rust but only once than be attacked by various ways for every simple things done until end of life.
Do you get how much of your life is wasted not doing what you want to make rewritings polishing changing ways you do things constantly?
The simple guy with simple thing learnt perfectly with all own fixes gonna outcompete you by just going one way constantly without detours developing own craft instead of trying thousands things getting every piece perfect deliberating which is slightly more perfect or effective.
I personally hate this and find react router much simpler and straight forward. I need a router not a spaceship.
👀
This is ultra complex even for seniors like me. This is never gonna replace react-router-dom and his simplicity. In your example, you need to configure 200 lines of code to even enable TanStack Router to work. To configure react-router v6, you need 5 lines of code. If its about type safety, 150 lines of code more than usual, just not worth the time and costs to bloat my code for just types safety. I will check my routes manually.
If I didn't know any better I would think you're paid by the Remix team lol. Holy smokes what a horrible take. I will agree though the syntax choice is odd to say the least. Still gonna use it over React Router cuz I dislike Ryan.
@@jordondax I dont hate anyone. Its about simplicity... Also, i dont want to play with any beta from javascript world until it becomes stable.
But query params is interesting feature, with react router i needed to use use-query-params library.
Couldnt agree more, I have a couple of production applications using both react-router and tanstack router and I much prefer react-router for its simplicity. I think TanStack just adds complexity for the sake of adding it. Stop over complicating something that doesn't need it.
have you used react router v6.4+? not much simpler than tanstack router lol
s
{2023-09-20}
Do you even know react router? It doesn't look like according to this video...
i really wish people could make videos about new things without terrible clickbaiting titles such as "WILL X KILL Y". love your videos, but this is F tier bullshit.
Its over engineered. Having built many enterpris apps. React router has always been enough
these guys are failing in complexity day by day. what a router ment to do is "route" not fetching data. it is also against the development principles. you have to make things more simplier not more complicated. if you use this kind of syntax your all code will be in the same file which will make it more complex and hard to read and hard to maintain. i dont like to give up simplicity just to make autocomplete.
Dude why did you start making click baity stuff
why so clickbait in which you are just crossing popular tools...
"What Is TanStack Router And Why I Love It" is not clickbait.
And it might actually overtake React Router in terms of capabilities and TypeSafety. I don't see this as clickbait at all.
@@KevinVandyTech as far as you say it might overtake react router, i agree with that point. but he can introduce new tools using a better thumbnail. why does he keeps crossing old tools... you can see that in his recent videos.
and for that matter he doesn't even need clickbaits. he has pretty huge subscibers
Thumbnail is clickbaity yes. UA-cam channels are businesses, so of course it makes sense for a business to want as my clicks as possible lol
@@siddiqahmed3274 The goal of a video creator is to get as many people to click his video as possible so that he can teach them something new. I think click-bait is only a valid complaint if you click on a video and don't get the value out of the video that you were expecting.
Because its ultra complex and beta! I dont want to watch beta versions. I am sick of that. Its like next 13. They introduced next 13 like he can give a birth to a child but nothing works inside. So, in JS, world, beta of everything is simply a scam...
Hi maybe you can check my NPM Package for react use-observer-hs for intersect observer
using useMatch to retrieve the loaded data doesn't work for me for some reason, gives me: Property 'loaderData' does not exist on type 'RouteMatch'.
So the property does not exist on the type returned by useMatch() at all. Kinda weird
Cool