feat(remix-react): add `useRouteData` hook #1281

sergiodxa · 2021-12-30T05:08:38Z

In Remix Utils I created this useRouteData hook which uses the useMatches hook to get the data of any route in the current URL

The way it works is you pass the route path and you get the data back, but if the route is a layout the path may be repeated, in that case I had to ask the devs to define an id in the handle export to search using that.

This PR moves this useRouteData hook and taking advantage of being able to access the internal context of Remix you can with this implementation pass the route ID (the file name without the extension), which is easy to know for the developer.

Why is this hook useful?

A super common requirement is to access the data of the parent route inside the child route, most people put that in the <Outlet context /> but it makes no sense when Remix already have the data of the loader inside a context, using useMatches is a way to solve it in user-land but this hook has a simpler implementation and could be used out of the box.

And, contrarian to the Outlet solution, you can also access a child route data from a parent one, so you can communicate data in both directions from top to bottom or from bottom to top.

kyleharper · 2022-01-06T09:22:40Z

I built this hook yesterday.

+1 for getting it into the Remix Utils 👍

sergiodxa · 2022-01-06T22:41:45Z

I built this hook yesterday.

+1 for getting it into the Remix Utils 👍

This is already in Remix Utils, this PR is to add it directly in Remix which is better because it can use the internal context.

kentcdodds · 2022-01-06T22:58:17Z

Another reason <Outlet context /> isn't suitable for loader data is because you could have a situation where route A puts something into Outlet context which route C depends upon. Then later someone adds context to route B (which is between the two) and surprisingly/unexpectedly breaks route C.

I'm in favor of this improvement.

zachdtaylor · 2022-01-07T06:03:06Z

+1, this would be awesome to have as part of Remix itself.

ryanflorence · 2022-02-11T02:58:12Z

We only ever intended useMatches for use cases where layouts needed child route data to build things like breadcrumbs.

I'm not sure why we're so bothered by child routes accessing parent data with it 🙃

useMatches as an access point for "all route data" is dang convenient though, and this hook makes it even more convenient. When you make something more convenient it gets used more! So I've been hesitant here. This whole thing reminds me of when we created React Broadcast and the React team was like "yeah, that's nice but it makes using context too convenient", and then they implemented it directly into React as React.createContext() the next release 🤣

I've already made my own useRootData() and useParentData() hooks around useMatches in my Remix apps because it really is just so nice. I know it's not how we intended useMatches to be used, but in practice, it's turning out to be a really great way to share route data across the hierarchy.

@mjackson I want to get your thumbs up on this, but I think we should add it.

I'd change this to just use route ids to access the data. We already exposed route ids as public API in parentsData of the meta function.

export function meta({ parentsData }) {
  let { user } = parentsData["root"];
  let whatever = parentsData["routes/whatever"];
  // ...
}

This hook is not any different:

export function Comp() {
  let { user } = useRouteData("root");
  let whatever = useRouteData("routes/whatever");
  // ...
}

It's far more convenient than <Outlet context /> because you don't have to keep drilling the values down (and augmenting with the new data) at each level. Additionally, if Remix wasn't the one doing the fetching, your app code would already have access to all this data. It's not like we're leaking implementation details either, the app defined the routes and supplied the data, we would just be exposing those app-supplied values with app-defined ids.

@sergiodxa if @mjackson gives the thumbs up, I'd like to see the hook just accept route ids and not require the handle or url paths.

kentcdodds · 2022-02-11T03:00:53Z

I've also put a lot of thought into this and agree we should have this feature with the route ID as mentioned. We just need to take care in the docs to explain the trade-offs so people don't use it unnecessarily.

sergiodxa · 2022-02-11T03:51:44Z

@sergiodxa if @mjackson gives the thumbs up, I'd like to see the hook just accept route ids and not require the handle or url paths.

The hook of this PR uses the route ID, the hook of Remix Utils doesn’t because it was not possible.

andresgutgon · 2022-02-12T16:31:47Z

+1 niceee

docs/api/remix.md

bluefire2121 · 2022-03-17T17:46:11Z

+1 for this feature. It would help when sending data to a resource route whose parent already has that data. Right now, one would have to use the loader hook to request the data twice: once for the parent route and once for the resource route.

machour · 2022-03-17T18:23:12Z

Right now, one would have to use the loader hook to request the data twice:

You can already use useMatches() and avoid requesting the data again.

Mange · 2022-03-18T09:52:52Z

Right now, one would have to use the loader hook to request the data twice [in a resource route]:

You can already use useMatches() and avoid requesting the data again.

useMatches can only be used in a React context, not inside a loader function. Resource routes are only a loader function.

It would help when sending data to a resource route whose parent already has that data.

Would it? This is still a hook, isn't it?

sergiodxa · 2022-03-18T16:12:28Z

+1 for this feature. It would help when sending data to a resource route whose parent already has that data. Right now, one would have to use the loader hook to request the data twice: once for the parent route and once for the resource route.

This will not solve that, because this is a React hook, it'll make it easier to get another route data on React but server-side you still need to get the same data on each loader it's needed.

machour · 2022-03-20T09:58:51Z

@sergiodxa Can you fix conflicts pretty please?

Co-authored-by: Mehdi Achour <machour@gmail.com>

sergiodxa · 2022-03-21T15:52:53Z

@machour done

MichaelDeBoey · 2022-03-21T16:01:25Z

docs/api/remix.md

+This hook returns the JSON parsed data from the route loader function of any matching route in the current URL.
+
+```tsx filename=app/routes/invoices.tsx
+export function loader() {


Since we're in a TS file

Suggested change

export function loader() {

export const loader: LoaderFunction = () => {

MichaelDeBoey · 2022-03-21T16:02:15Z

docs/api/remix.md

+
+```tsx filename=app/routes/invoices.tsx
+export function loader() {
+  return fakeDb.invoices.findAll();


action & loader need to return Response or use json helper

Suggested change

return fakeDb.invoices.findAll();

return json(await fakeDb.invoices.findAll());

I'm not 100% sold on this requirement. I know we already merged some docs changes that said we have to do this, but I'd like to find a way to still allow people to return whatever data they want and we just encode/decode for them.

I think a lot of the confusion about typing loader return value and useLoaderData have to do with Remix allowing you to return a naked object from the loader.

I strongly recommend deprecating this and having them return an actual Response. That way there is no magic that leads to misunderstanding. They will know that loaders always return a Response.

I'm also in favour of merging @chaance's #2252 and making a non-Response return deprecated

MichaelDeBoey · 2022-03-21T16:03:04Z

fixtures/gists-app/app/routes/route-data.tsx

@@ -0,0 +1,22 @@
+import type { LoaderFunction } from "remix";
+import { Outlet, useRouteData } from "remix";


Suggested change

import { Outlet, useRouteData } from "remix";

import { json, Outlet, useRouteData } from "remix";

MichaelDeBoey · 2022-03-21T16:03:15Z

fixtures/gists-app/app/routes/route-data.tsx

+import { Outlet, useRouteData } from "remix";
+
+export let loader: LoaderFunction = async () => {
+  return { title: "Parent Route Data" };


Suggested change

return { title: "Parent Route Data" };

return json({ title: "Parent Route Data" });

MichaelDeBoey · 2022-03-21T16:03:28Z

fixtures/gists-app/app/routes/route-data/index.tsx

@@ -0,0 +1,17 @@
+import type { LoaderFunction } from "remix";
+import { useRouteData } from "remix";


Suggested change

import { useRouteData } from "remix";

import { json, useRouteData } from "remix";

MichaelDeBoey · 2022-03-21T16:03:39Z

fixtures/gists-app/app/routes/route-data/index.tsx

+import { useRouteData } from "remix";
+
+export let loader: LoaderFunction = async () => {
+  return { title: "Child Route Data" };


Suggested change

return { title: "Child Route Data" };

return json({ title: "Child Route Data" });

MichaelDeBoey · 2022-03-21T16:07:20Z

fixtures/gists-app/tests/route-data-test.ts

+
+  afterEach(() => browser.close());
+
+  describe("the parent should render the child title", () => {


As @kentcdodds also requested in #2411 (comment)

I think we’re trying to use Ryan’s createFixture utility as much as possible instead of the gist app. Could you switch this test to use that instead?

Agreed. We are trying to get rid of the gists app for testing stuff and use a separate createFixture test instead. Thanks!

bluefire2121 · 2022-03-27T01:17:36Z

+1 for this feature. It would help when sending data to a resource route whose parent already has that data. Right now, one would have to use the loader hook to request the data twice: once for the parent route and once for the resource route.

This will not solve that, because this is a React hook, it'll make it easier to get another route data on React but server-side you still need to get the same data on each loader it's needed.

Thanks @sergiodxa and @Mange for the reminder. You all are both correct. Hooks have to top level.

chaance · 2022-04-29T15:30:34Z

Closing this not because we don't want the feature, but because we'll be introducing it into React Router instead (as well as many other Remix APIs). Stay tuned, and thanks @sergiodxa for the work here!

remix-cla-bot bot added the CLA Signed label Dec 30, 2021

machour reviewed Mar 16, 2022

View reviewed changes

docs/api/remix.md Outdated Show resolved Hide resolved

machour added the feat:routing label Mar 17, 2022

sergiodxa and others added 3 commits March 21, 2022 10:27

Add useRouteData hook

d33422c

Update docs/api/remix.md

615f615

Co-authored-by: Mehdi Achour <machour@gmail.com>

Fix code format

fe49508

sergiodxa requested a review from machour March 21, 2022 15:52

MichaelDeBoey requested changes Mar 21, 2022

View reviewed changes

MichaelDeBoey changed the title ~~Add useRouteData hook~~ feat(remix-react): add useRouteData hook Mar 22, 2022

MichaelDeBoey added the renderer:react label Mar 22, 2022

chaance closed this Apr 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(remix-react): add `useRouteData` hook #1281

feat(remix-react): add `useRouteData` hook #1281

sergiodxa commented Dec 30, 2021

kyleharper commented Jan 6, 2022

sergiodxa commented Jan 6, 2022

kentcdodds commented Jan 6, 2022

zachdtaylor commented Jan 7, 2022

ryanflorence commented Feb 11, 2022 •

edited

Loading

kentcdodds commented Feb 11, 2022

sergiodxa commented Feb 11, 2022

andresgutgon commented Feb 12, 2022

bluefire2121 commented Mar 17, 2022

machour commented Mar 17, 2022

Mange commented Mar 18, 2022

sergiodxa commented Mar 18, 2022

machour commented Mar 20, 2022

sergiodxa commented Mar 21, 2022

MichaelDeBoey Mar 21, 2022

MichaelDeBoey Mar 21, 2022

mjackson Mar 21, 2022

kiliman Mar 22, 2022

MichaelDeBoey Mar 22, 2022

MichaelDeBoey Mar 21, 2022

MichaelDeBoey Mar 21, 2022

MichaelDeBoey Mar 21, 2022

MichaelDeBoey Mar 21, 2022

MichaelDeBoey Mar 21, 2022

mjackson Mar 21, 2022

bluefire2121 commented Mar 27, 2022

chaance commented Apr 29, 2022

	export function loader() {
	export const loader: LoaderFunction = () => {

	return fakeDb.invoices.findAll();
	return json(await fakeDb.invoices.findAll());

		@@ -0,0 +1,22 @@
		import type { LoaderFunction } from "remix";
		import { Outlet, useRouteData } from "remix";

	import { Outlet, useRouteData } from "remix";
	import { json, Outlet, useRouteData } from "remix";

	return { title: "Parent Route Data" };
	return json({ title: "Parent Route Data" });

		@@ -0,0 +1,17 @@
		import type { LoaderFunction } from "remix";
		import { useRouteData } from "remix";

	import { useRouteData } from "remix";
	import { json, useRouteData } from "remix";

	return { title: "Child Route Data" };
	return json({ title: "Child Route Data" });


		afterEach(() => browser.close());

		describe("the parent should render the child title", () => {

feat(remix-react): add useRouteData hook #1281

feat(remix-react): add useRouteData hook #1281

Conversation

sergiodxa commented Dec 30, 2021

kyleharper commented Jan 6, 2022

sergiodxa commented Jan 6, 2022

kentcdodds commented Jan 6, 2022

zachdtaylor commented Jan 7, 2022

ryanflorence commented Feb 11, 2022 • edited Loading

kentcdodds commented Feb 11, 2022

sergiodxa commented Feb 11, 2022

andresgutgon commented Feb 12, 2022

bluefire2121 commented Mar 17, 2022

machour commented Mar 17, 2022

Mange commented Mar 18, 2022

sergiodxa commented Mar 18, 2022

machour commented Mar 20, 2022

sergiodxa commented Mar 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bluefire2121 commented Mar 27, 2022

chaance commented Apr 29, 2022

feat(remix-react): add `useRouteData` hook #1281

feat(remix-react): add `useRouteData` hook #1281

ryanflorence commented Feb 11, 2022 •

edited

Loading