React router's data utilities are awkward in SPA's
I've been having some FOMO with Remix and Next.js lately. The company I work for was contracted to develop the frontend UI for an internal application of a large public business. I lead that development. I've been in this position for this same app for years now. They wanted a single page app that they could host and serve statically. They have people on their side doing the development of the api's that the frontend will be consuming. We started the app using react router v3 and have upgraded it to v6 now. We've also gone through an evolution of using redux/redux-thunk and now react-query for our data fetching.
I've recently been given the opportunity to start the UI development of a new application and although the requirements are the same in that it needs to be a SPA, I was excited to use react router's new data utilities:
fetchers...and then I realized just how awkward these things are in a single page application.
In this post I'm going to describe what I find awkward and then describe the approach I've decided to use on this new application. I hope this helps other devs and comes across as constructive criticism and useful feedback for the Remix team. I have a ton of respect for those folks. I love react router and am very grateful for the work that's been put into it.
I dig route loaders. The idea that the router can fetch each active route's data in parallel to avoid waterfalls makes a lot of sense to me. You fetch the minimal amount of data for each route here. If certain data isn't immediately integral to a particular route, then you can go ahead and render it and fetch the other data after the route component is rendered. Beautiful.
Dominik(aka tkdodo) has an excellent post on how to incorporate react query and react router. I highly recommend giving that a read.
This is where things start to get weird. Fetchers are used to make requests to apis without triggering navigations. For example, fetching options for autocomplete/combobox inputs would be an appropriate use case for a fetcher. It's similar to react-query's
What I have found awkward is that you must go through the router to use these. React router wants to be able to invalidate these requests after successful action submission. That doesn't sound so bad but let's look at what's required to make a fetcher work.
Let's pretend we're implementing a combobox where a list of cities populate as options as the user types. At a minimum this is what our router could look like:
So what's awkward with this?
First off, we're defining a sort of "virtual" route. It doesn't really exist. You can't go to
/cities in the browser and get that data because this is a single page app. This works as expected with Remix. You can go to
/cities and get that data back. With react router you get an error about the route not returning an
element. This makes sense. React router has no way to actually return a
Response to the browser with the
Content-Type: application/json header set.
Second, we can't just make requests directly from our route element to the endpoint that we need. We have to go through the fetcher api which means using
fetcher.submit() which means we are beholden to either using search params or
FormData. I'd guess the vast majority of the api's people are consuming in react router apps are using json or graphql. We have the mental overhead of conceptualizing two requests: one to the router and one to the api endpoint we actually care about. In the example above, we use a
contains search param because that's the simplest way to pass the data. However, the api endpint we're using uses json. We have to juggle this request through react router using different content types to make it work.
Third, if you're using react router's actions you must implement the
shouldRevalidate if you don't want the router to retrigger this after a successful action:
Fourth, if you have some data you want to fetch that's not crucial at initial route render, the recommendation is to use
useEffect to trigger that.
The is less than ideal because it triggers the fetch twice when being run in strict mode. When you're hacking on your app, you'll see two network requests due to this. Is it really a problem? The fetcher will appropriately handle the responses and give you the response from the second request but I think this makes it harder to find legitimate bugs, where your code could be errantly making duplicate requests. That said, it is a recommended approach seen in the reactjs docs.
You also have to reach for
useEffect when the
fetcher.data lands like to do things like focus an input or set some state based on that data.
There are just too many odd nuances and indirections with fetchers for me to want to use them.
We might be encouraged to use the defer utility in the loader. The concept is pretty slick. It really let's you pull the lever up and down on the data you need right away vs a bit later. However, it comes with some rough edges as well.
If you're using typescript and were previously casting the loader data like this:
That's now broken.
defer returns an instance of
DeferredData but in your component, what gets returned is an object that contains promises. You end up having to add some more indirection:
Additionally, to use this promise you'll need to use the
Await render prop component which, like fetchers, doesn't come with any
onError callbacks to make use of.
The issues I've discussed here with
Await aren't unique to react router/SPA's but I thought worth mentioning.
With react router and Remix, we're told to "use the platform". This translates to using search params and
FormData and leaning into uncontrolled form inputs so you don't have to manage form state and it supports progressively enhanced forms...if you're using Remix. Not so much with react router since there is no server component to handle form submissions.
Are progressively enhanced forms good? Absolutely...in certain contexts. When I'm using just react router to build a private internal app for ~50 users all located in a single major city, progressively enhanced forms are just not relevant. If you're building apps for millions of users that are all over the world being used by all sorts of devices, that's a different story. I have never worked on one of those applications. I fully understand that using just react router eliminates progressively enhanced forms. I don't want to be beholden to its implications in the apps I'm building. Thanks, but I'll opt out of the hard mode that is adhering to progressively enhanced form restrictions but not actually progressively enhanced.
So what's my beef with its "implications"? Just like fetcher to load data, you are forced to use "the platform"'s apis:
FormData. This means you're encouraged again to go through an awkward layer but this time it's html and
FormData. I realize this sounds kinda ludicrous. Html is awkward? Yes, using it as the source of truth is. Hear me out.
If we're going to use the recommended approach, a form component could like something like this:
Even though my form elements are mimicking different data types(string, boolean, number),
FormData doesn't care. Everything you
formData.get() out is a string. We're responsible for coalescing that back into the appropriate types for our api endpoint.
Also notice that since we're modeling our data in markup we have no type safety there. Hopefully you, or your editor, will catch typos such as the fact that the Favorite Number input's
name is misspelled.
This gets even more awkward if you're modeling objects and arrays.
The "easiest" way I've found to do this is to use a special input naming syntax,
employees[name], and then use a package like qs to parse it out from
The sweet spot for me
I find using react-query's
useMutation hooks where I am "suppose" to reach for a fetcher much more straightforward and productive.
Here is a rewrite of the combobox example using
useMutation. It might seem odd to use
useMutation instead of
useQuery here because we're fetching data and not actually "mutating" anything but
useMutation is a utility that we can call on demand, just like
I think this is an improvement.
- The router doesn't need to know about this request.
- I don't have to bounce around my codebase from the router back to my component to make this work.
- There's no virtual route that i have to redirect this through.
- If i need to do something when the data lands, I can use the
onSuccesscallback from the query/mutation. There are no
useEffectsinvolved. My requests don't get duplicated in strict mode.
The primary reason json apis became so ubiquitous is because it's such an improvement over
FormData for modeling data. We are not limited to
Let's rewrite some code to use
useMutation and model the data using typescript.
Whoah, that's way more code! There are definitely some tradeoffs here. We are switching from uncontrolled to controlled inputs. This is going to add more lines of code. However, if your form needs to hide/display certain inputs or make some required based on the values of other inputs, you're going to need to track those in state anyway though. Then you end up with some controlled and some uncontrolled inputs and then you're stuck with
FormData to get the data from the form. I like consistency and I have these requirements for the forms I work on incredibly often. 95% of the time I'm going to end up having to make the form behave differently based on its values. If most of your forms consist of only a handful of string values and the data you're modeling is flat, then I can understand the attraction of uncontrolled inputs. For me and the types of apps I work on it's just easier to start with fully controlled inputs in the first place to better model my nested data structures that contain lots of inputs of various types.
- Side note: I wrote a pretty minimal form state hook that I need to publish as a package. It's similar to useFormik but far simpler in terms of code and features. It has served me well though. Feel free to steal.
This leads to way easier debugging. Have you ever tried to
console.log(new FormData(document.getElementById('my-form')))? Have fun with that one. I would much rather use
Disclosure: Leaders in the react space disagree with this view so take what I'm advocating with a grain of salt but do note that most of these individuals are heavily invested in supporting progressively enhanced forms and server side react. Not every app needs those things. Am I glad they exist? Definitely.
This is validating. I've been teaching for years that folks should go against the docs and instead default to uncontrolled inputs instead. Glad to see the react docs get updated in this way. https://t.co/02Y5WJF9QS— Kent C. Dodds 🌌 (@kentcdodds) March 31, 2023
React router actions and react-query's mutations take complete opposite approaches to this. With react-router, everything is invalidated by default. You have to configure the conditions for each loader to not be revalidated. React query mutations are completely isolated by default. You have to use the
onSuccess callback to do your invalidations of router loaders or queries. I find react query mutations' explicit, opt-in approach much easier to reason about. After a mutation if I need to refresh the current route's data, I can explicitly use the revalidator. If I need to invalidate react-query queries, I can use the
Also consider the fact that we could have a single action/mutation that needs to be used from various places in the app and need to behave differently. It's unclear where some of this logic should go. Should it be accounted for in the action? or do we need to
useEffect in the component?
useMutation we can share a bare minimum bit of code and make it behave differently based on specific use cases without touching the core submission logic.
What I hoped to see from fetchers
I know there is no way to make a native html form submit json but json is part of "the platform".
Response.json() are all part of the web platform. When I'm using react router, I don't want to pretend that I'm using form navigations. I would love to see fetchers embrace this.
It would be sweet if react router would
JSON.stringify() my data and add a
application/json header to its
I realize I can encode it myself and make it kinda work through
FormData but that's an awkward workaround that makes me end up using
JSON.parse(). This would work for route actions but not for my next request...
I'd love to be able to use fetchers outside of the router. Let me call an external api directly and not force me through the router. Let me have all of the request management goodness outside of route loaders.
Adding some success/error callbacks instead of having to rely on
fetcher.state would also be handy.
The last thing I'd like to see is some other way besides
useEffect to kick off a
fetcher.load() on component mount. Provide some way to avoid the duplicate requests being made in development while in strict mode. I'm not sure what this would look like though.
Most of this wishlist isn't related at all to UI routing but more concerns general data fetching so it seems out of the scope of what react router would be concerned about changing. I get that. It also seems silly to reimplement something like react query when that project exists already and can be used here.
I think tanstack router has a ton of potential and may just be exactly what I'm really looking for: a router not as tightly integrated into data fetching/mutating and not geared towards eventually upgrading to an opinionated full-stack framework. I'll be keeping my eye on that project.
Not counting on too many changes
Since Remix was acquired by Shopify, an ecommerce platform that is extremely concerned with progressively enhanced forms, I'm not holding my breath that these issues will be addressed. It doesn't seem like there would be much incentive to have the team focus on react router rough edges in SPA's when their primary interest is Remix. I'd be stoked to be wrong about that though.
It seems to me that the vocal majority of the react crowd on twitter and other platforms work for massive companies, or that's where their experience has come from, and are required to support millions of users with their products. Personally, I feel this has resulted in undue imposter syndrome for myself and I assume others. I don't blame them for that btw. They're just sharing their experience and I'm glad of it.
Only recently have I really concluded that every developer is working under vastly different requirements. Someone working on the frontend for Facebook, Figma, Notion, Twitter, etc has very different requirements than someone like myself, who is working on application for a handful of users that doesn't need to be progressively enhanced, support mobile, need to work offline, etc.
Everyone seems to be saying that any "real" react project needs to really use a full-stack framework. Even the react docs now recommend starting new react projects with a full on framework that consists of a server side component. Sometimes the business requirements prevent you from being able to do this. React router hasn't gone away yet and I think it still has its place for certain use cases. It's silly but I feel guilty not embracing these new data utilities but I need to remember I have different requirements than what the maintainers of these projects aim to support.
I hope this post helps folks like me, who are developing private applications that don't need to be used by millions and not feel guilty because you're not adhering to the recommended approach or that you're alone in thinking some of this stuff is just awkward to use in a single page app.
I sent Tanner Linsley a copy of this post before I published to proof-read and point out any terrible hot takes he thinks I might have and received a response which gave me some much appreciated validation.
This hits hard from the perspective of SPAs. I’ve mentioned a few times publicly before: spas are the underrepresented middle class of front end. They’re everywhere, usually silent, many behind auth walls and likely not going away any time soon. They have definitely been over deployed as a silver bullet though, so naturally the bleeding edge pendulum is swinging hard back in the direction of the server, which is much needed for web tech to scale and evolve in areas where spas have suffered over the last generation of web frameworks, but that doesn’t mean I’m ready to abandon the pattern entirely, and for me personally that also means building tools that will happily cater to both paradigms. - Tanner Linsley, via Twitter DM