The future of react-router just got a lot brighter

00:00 The ReactRouter team just dropped one of the biggest announcements they ever dropped and that is the open governance model for ReactRouter. If you don't know what that is, today we're gonna talk about it and I'm gonna explain to you why I think this is really important for ReactRouter and why I think this is really exciting and it's gonna be great. So without further ado let's jump into it. Alright so brand new day, brand new article and today it's all about ReactRouter and if you didn't already know that's something I'm really passionate about. So check this out.

00:35 They really open up strong with this article because they quote Michael Jackson. And I'm not going to tell you if it's the musician or the developer. But what he said is basically ReactRoute isn't just mine and Ryan's baby anymore. It is a mature open-source project with millions of dependents and we want everyone to have a say in how the project moves forward. So if you clicked on the video to figure out what the announcement is, this is it.

01:02 They're not going to be the sole decision makers on React Router anymore, but it's going to take up a whole new model and open up the possibility for everybody to contribute, to give new ideas and to shape the future of web development. Because ReactRouter is one of the biggest libraries in the ecosystem. If your proposal gets accepted, you personally get to influence how web development develops in the future. So that's something that is really cool and really exciting but the question is how are they gonna do it? Well let's continue on.

01:38 So Michael and Ryan have been at it for the last decade working on React router and they did some amazing work. They broke the react router like seven times up to this point and we all had to migrate to the next major and it was a horrible experience so you know this this is good news because they are stepping away now so I'm expecting react router version 8 to not be a breaking change but jokes aside they truly are a great team and they brought a lot of new features to the actual ecosystem and they kind of influenced how react 19 dropped and what they brought as new features so love them hate them they did some amazing things and now it's time for them to move on to Remix version 3, but they're not leaving Reactor behind unmaintained and kind of dead, but the opposite. So if you didn't know they dropped the wake up remix post last week and the reason they didn't drop this announcement before that one is because somebody leaked it and when I say somebody it was probably Ryan when he created the PR and somebody forked the repo but we're not gonna go into those details and because that got leaked they had to first release the wake up remix post and then this one so it kind of got a little bit messy and it kind of worried a lot of people because they weren't sure what the future of React router was.

03:05 And this is what happens when you leak stuff. You don't get nice things at the proper time. So they didn't give the governance model the proper focus and announcement. And now here we are. So let's go into the motivation for it.

03:20 As I said earlier, they kind of impacted the whole React ecosystem and especially with Remix where they added a lot of APIs and paradigms and actual opinions on how to do things. React adopted some of those and moved it back into React so now those features kind of got deprecated in Remix or React 11.7 depending on what you're using and they've been natively moved to React. So a good example of this is if you think about the Lynx export in React Router version 7, now it's moved natively to React 19 so you don't really need it in a lot of cases you can just write JSX for it and React just appends it to the head. So that would be one of the examples where something that was previously a part of Remix and ReactJava got moved into React. So the whole motivation behind this is to make ReactJava even leaner and what that means is So if you had for example six different APIs to do the same thing they would want to have one API that allows you to do the same thing, but with less friction and without you having to be inconsistent all over the place because in one location you use one hook and the other use the other one and something like that.

04:34 A good example of this would be something like use matches you can either get them from the component props or you can get them from the hook in some places you might use the hook in some places you might use the props so stuff like that and to allow them to do that they have to have design goals obviously and what they're gonna do is they're gonna have a steering committee that is going to decide the future of reactor hour and in the steering committee if I open up this doc there will be five people at the beginning so Matt, Pedro, Mark, Jacob and Brooks so all of these guys are part of the core React router team. Pedro and Mark are the guys that work on the VIT integration They brought on type safety and stuff like that. Matt you might know by this small little feature called middleware Jacob is the guy behind RSCs and Brooks is the guy that makes funny memes on x to promote react outer so he is the most important of the team members so you should go follow him definitely and this will be this community moving forward but they also plan to bring on community members that are prevalent in the community.

05:50 I'm guessing that will happen sometime in the future I'm not really sure but that's also something exciting because some prominent community members will be able to contribute to React Router and its development. And let's quickly go through their design goals to see what they're aiming for so less is more and you can feel the whole philosophy of less is more through the whole react router they give you the least amount of pain avoidance as I like to call it so you don't have to implement the nitty-gritty details of web development paradigms like creating your custom serializer, deserializer, streaming and stuff like that And what they're aiming to do is make it even slimmer and give you more functionalities with less APIs. And if you think about it, a good example of this would be something like use loader data, use action data and hooks like that. So there is no reason for that hook to be multiple hooks. It could be one single hook, use module data for example and then you can either fetch the loader data or the action data, depending on what you need.

07:03 And that would be an example of where less is more, because you have one less hook, but you have more functionalities out of it and it's easier to use. So that would be your first example. Then routing and data focused. So the focus on core router integrated and router centric APIs to avoid adding first class APIs that can be implemented in user land. Now this sounds like a very trivial and non-specific thing, but this is the most important part of their philosophy, because if you think about it, the reason why React is really easy to use and add anywhere, and you've probably seen examples floating around where people add ReactRouter into Next.

07:49 Well the reason behind that is because they allow you to implement everything in userland and they make the APIs they provide as minimal and slim as possible which allows you to plug ReactRouter into anywhere. Cloudflare, Vercel, Netlify, VPS, your old PC that's been running for 20 years without stop that acts as a server. Anywhere. And that's really important. And if you compare it to something like Next where they give you for example custom responses or custom headers instead of the native ones that would be the difference in philosophy where React JavaScript tells you hey you can implement this yourself and add this custom functionality into your app if you need it and then simple migration paths now this if you read any amount of reddit posts you know this is just a blatant lie they just break things that they never care about migration paths so this is something that is completely false right right well wrong if you actually spend time using react router and especially remix you would know that they care a lot about your migration path to the future and for example, if you wanted to migrate from Remix version 1 to version 2, you could still be on version 1, implement all the future flags, And then the change to version 2 would be basically just updating the package.

09:20 JSON. And that was also the case with the move from version 2 to react other version seven, where you would just have to rename the imports from remix run node to react to our node and stuff like that. So they really do care. And it's evident if you ever use Remix People like to hate on them a lot and say they break things but I think majors are meant to break things anyways and they really try to break as little things as possible for you and if you kind of open up your mind to it and don't listen to Reddit you're gonna see it so yeah that those are just my two cents on the matter and let's move on. So the next one is the lowest common mode.

10:09 So if you think about it React driver is multiple things at the same time it's both a library and a framework so this basically means if they can put it in the library they are not gonna put it in the framework but they are gonna put it in the library because framework builds on top of the library now you have the feature that works in both instead of it working just in the framework when it could have been a library feature as well. So that's the lowest common mode. And the last one is the regular release cadence. So they're aiming for major semi-version releases on a yearly basis. So you can expect a lot of breaking changes on a yearly basis so that's really cool and you can post on reddit to get a lot of karma for it so that's also cool even maybe get some of those cool little badges and yeah I think their main goal is to help...

11:04 To get some help from the community and to allow the community to help them make decisions moving forward and make React-Hour the best framework it could be. And now, what's coming up? Because we don't use the forbidden word. This is the cool part where we go over what's coming. So what we can expect from ReactOut in the following months.

11:27 So the first thing is they're stabilizing the current unstable features. So stuff like middleware, Vite environment API, optimizing dependencies, sub-resource integrity, splitting route modules and all of these unstable features at the moment are gonna become stable and what's that gonna mean for you you're gonna go to your production app that uses unstable middleware and you're gonna rename unstable middleware to middleware and you're gonna laugh at it and think ha these losers thought I was not gonna use unstable stuff in production. And that's pretty much it. They have the upcoming features part and this is exactly what I was actually talking about earlier. So use router state.

12:13 So yeah, if you look at it you have these five hooks and then if you want to access pending states this would be how you do it and you also have the view transition states like this and they're gonna consolidate into one hook and then you would have use router state and you have active pending transitioning and all of this gets merged into one so you can access the location, the search params, the params, the matches, the type and everything is available from a single hook. You have this parameter here that you can pass in and this can also be used with the href function that they offer. So you kind of get five hooks into one, the API gets smaller, it's easier for you to use, and it's just leaner and meaner. So that's really cool. And that's the essence of it.

13:05 So they're slimming it down, making it better, making it more compact without sacrificing any features or anything else and they're going to deprecate it and then remove it so if you hear about them breaking something it's going to be a transitional process so it's really up to you to use the new hooks instead of the old ones. And then they have a new fancy faster and more flexible route pattern matcher. I've heard this is amazing. I'm looking forward to seeing what this is exactly, but I'm hoping it's better and faster than it is right now. That would be some free benefit that we could get out of the box without us having to do anything so that would be really cool react server components a type save alternative to use route loader data finally I've been waiting for this for a very long time because I hate having to type this and then do all the song and dance and create custom hooks when I could just use the hook itself so that's really exciting and some absolute route component shenanigans that helps people on version 5 upgrade this is exactly what I was talking about they even care about version 5 users who are like way on the old stuff.

14:22 So yeah. And yeah, they're looking for other opportunities to simplify React router. They're deprecating their own custom solutions to problems that's solved by react APIs, like adding a title, the method, the link, the view transition and stuff like that. So the method and the links exports are going to be deprecated by version eight and remove the nine. So you have two majors to move off of them and then they will not remove an API unless they believe that React has an alternative that is at least as good and they always use Fetcher as an example and then we have the open means open section and here they just talk about how it's gonna work so they say that I want the community involved as well here and they took the governance doc from the TC309 process so this is gonna have five stages here so from proposal to consideration to alpha, beta, stabilization and stable.

15:19 So that's how it's gonna go and if you go over these you can see the details so for example they're gonna add an unstable prefix then they're gonna remove it when stabilized and then they're gonna release it and edit it into the next major and stuff like that so if you're interested in the nitty-gritty details you can read it yourself I'm gonna link it somewhere and yeah we reached the end of the article I hope you enjoyed this one and I hope you're excited about the future of React router. It's not as dark and as bleak as people like to think it is and it's going to be amazing. Thank you for watching and see you in the next one. Bye!