Remix Newsletter #35

Remix Jam is live this Friday, React Router has framework support and several new experimental APIs, and we have a few great resources to share from the community.

This is a good one, let's give it a spin 💿

Remix Jam 2025 Livestream this Friday!

We're opening our garage doors this Friday, October 10th, at Remix Jam in Toronto and online to celebrate the past, present, and future of Remix.

Remix Jam is our first conference since Remix Conf 2023, and we're more excited than ever to share with all of you what we've been working on and what the future of Remix looks like.

We also have several guest speakers who will share their insights on React Router, building MCPs, scaling large codebases with millions of pageviews per day, and creating AI chatbots users actually want to use.

Our whole team is gonna be there and we can't wait to see and meet many of you in person on Friday. For those who aren't able to join us in person, we hope you'll catch the livestream.

Watch the Remix Jam livestream at 10:00am EDT on October 10th ↗

React Router v7.9.1-v7.9.4

React Router v7.9.1-v7.9.4 brings our first unstable release of RSC Framework Mode, new APIs for working with fetchers and route data, and a number of other bug fixes and improvements.

New Features

RSC Framework Mode (unstable): This release includes our first unstable support for RSC in Framework Mode! This is a huge milestone in bringing React Server Components to Framework Mode. We're excited to get this into your hands for testing and feedback.

Read more about RSC Framework Mode below.

Type-safe Route Data Access (unstable): The new unstable_useRoute() hook provides a type-safe way to access loaderData and actionData from any route in your app. It works seamlessly with Framework Mode's typegen system, giving you autocomplete and type safety.

Read more about unstable_useRoute() below.

Fetcher Reset API (unstable): We've added a new fetcher.unstable_reset() API to reset fetchers back to their initial idle state. This has been a long-requested feature and we're excited to finally ship it.

Bug Fixes & Improvements

We've also made a number of improvements to middleware and fixed several important bugs:

• Ensure client-side router runs client middleware during initialization even if no loaders exist
• Fix middleware prop not being properly supported on <Route> when used with a data router via createRoutesFromElements
• Update createRoutesStub to work with middleware
• Fix Data Mode regression causing a 404 during initial load when middleware exists without any loader functions
• Update Lazy Route Discovery manifest requests to use a singular comma-separated paths query param instead of repeated p query params
• Do not try to use turbo-stream to decode CDN errors that never reached the server, permitting the actual CDN error to bubble to the ErrorBoundary
• Update useOutlet returned element to have a stable identity between route changes
• Handle encoded question mark and hash characters in ancestor splat routes
• Fail gracefully on manifest version mismatch logic if sessionStorage access is blocked
• Fix presets future flags being ignored during config resolution
• Switch internal vite plugin Response logic to use @remix-run/node-fetch-server
• Handle external redirects from server actions
• Update valibot dependency to v1.1.0
• Validate format of incoming session IDs

Check out the full React Router changelog ↗

React Router RSC Framework Mode Preview

Following our preview of React Server Components in Data Mode, we're excited to announce that RSC support is now also available in Framework Mode! This means you can now use Server Components with the streamlined developer experience that Framework Mode provides.

Getting started is incredibly simple. In your vite.config.ts, just swap out the regular reactRouter plugin for the new unstable_reactRouterRSC plugin:

With this change, you'll have access to all the RSC features we introduced in Data Mode:

• Return RSC content from loaders and actions
• Server Component Routes by exporting a ServerComponent instead of the usual default export
• Client components with the "use client" directive
• Server Functions with the "use server" directive

This means you can incrementally adopt RSC, or simply sprinkle in Server Components where you want them:

Even though RSC requires both an "RSC server" and "SSR server," the build output is still just a single server runtime. That means you can deploy it just like any other React Router app today.

This preview release supports server-rendered apps, with SPA Mode, pre-rendering, and custom build entries coming in a future release. You can get started by scaffolding a new app from our unstable RSC Framework Mode template, or check out the docs for more details.

Read "React Router RSC Framework Mode Preview" ↗

Type-Safe Route Data with unstable_useRoute()

The new unstable_useRoute() hook makes it easy to access loaderData and actionData from any route in your app with full type safety. Think of it as a better version of useRouteLoaderData that works with the typegen system and also supports actionData.

For example, let's say you have an admin route and you want any child routes to access its data. First, define your route with a loader and action:

Now you can create a reusable widget that accesses this data from any nested route:

In Framework Mode, useRoute integrates with typegen to give you TypeScript errors when invalid route IDs are passed in, and provides full autocomplete for loaderData and actionData.

You can also call useRoute() without arguments to access the current route's data, which is equivalent to calling useLoaderData and useActionData together.

Learn more in the React Router changelog ↗

Resources from the Community

Leverage React Router's Built-in Data Deduplication

Long time community member and 3rd party contributor, Sergio Xalambrí, recently wrote an article explaining how React Router's built-in data deduplication works.

This article provides a very approachable explanation and walkthrough of some of React Router's internals, which will give you a greater appreciation of the framework as well as help you learn how you can better leverage its built-in data deduplication.

From the article:

The elegance is that you don't have to think about any of this. You write natural promise-based code using Promise.all(), Promise.allSettled(), or any combination logic, and React Router automatically detects the relationships and optimizes the data transfer. It's like having a smart compiler for your data loading patterns.

Read "Leverage React Router's Built-in Data Deduplication" ↗

React Router Auto Routes

Kenn Ejima recently released react-router-auto-routes, an "automatic folder-based routing with colocation for React Router v7+".

This library draws heavy inspiration from the remix-flat-routes library that was a staple for many Remix v2 and React Router v7 projects. It has a few new opinions and conveniences baked in and is definitely worth playing with.

Check out "React Router Auto Routes" ↗

Connect at a Remix Meetup

Remix Meetups are run voluntarily by members of the community all around the globe with in-person and online options. These meetups feature local speakers, hackathons, workshops, and more!

Find a meetup near you ↗

No meetups near you? Reply to this email if you are interested in starting your own meetup. We've even created some guides to help you get started.

Starting a New Remix Meetup ↗

If you enjoy getting this email, please let us know! We'd love to hear from you, what you like about Remix and these updates, and any suggestions you have to improve them.

- The Remix Team