The first release of 2023 is a big one for us. Remix 1.10 completes the React Router-ing of Remix and puts us in a solid position to ship some really exciting features in the new year. Let's dig in.
Rebuilt on React Router's data APIs
All of the data loading and mutation APIs you love in Remix are now completely built into the new framework-agnostic @remix-run/router package. This layer serves as the foundation of both React Router and Remix, and it provides a canvas upon which new integrations can be built moving forward. The community has already started building some really exciting experiments with this, and we're cooking up a few cool things ourselves 🌶️.
As a Remix user, nothing about your code or its behavior should change. But the new implementation opens several new possibilities we think you'll love, and it allows us to quickly start bringing new React Router features into Remix (like sending promises over the wire 🤯).
And if you have a React Router app you've been thinking about migrating to Remix, you can be confident that using the new APIs in v6.4 will work the same way when you're ready to make the move (really though, we think you should make the move).
If you have any questions on these new APIs, head on over to their official documentation in the React Router docs.
Higher level control of revalidation
Exporting a shouldRevalidate function from a route module gives you the ability to fine-tune how and when your route loaders are called.
Remix handles revalidation for you in many scenarios to keep your UI in sync with your data automatically. By default, route data is revalidated when:
After an action is called from a <Form>, <fetcher.Form>, useSubmit or fetcher.submit
When the URL search params change on the current route
When dynamic route params change on the current route
When the user navigates to the same URL
If shouldRevalidate is exported from a route module, it will call the function before calling the route loader for new data. If the function returns false, then the loader will not be called and the existing data for that loader will persist on the page. This is an optimization that can be used to avoid unnecessary database calls or other expensive operations.
// routes/invoices.jsx
export async function loader({ request }) {
let url = new URL(request.url);
let page = Number(url.searchParams.get("p") || 1);
let limit = 20;
return json(await getInvoices({ limit, offset: (page - 1) * limit }));
}
export function shouldRevalidate({ currentUrl }) {
// Submissions shouldn't trigger a reload on most navigations
// under invoices, so we only revalidate if the submission
// originates from the nested /invoices/new route
return currentUrl.pathname === "/invoices/new";
}
</tr></table>
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Bumps @remix-run/dev from 1.7.6 to 1.10.1.
Release notes
Sourced from
@remix-run/dev
's releases.... (truncated)
Changelog
Sourced from
@remix-run/dev
's changelog.... (truncated)
Commits
529322d
chore: Update version for release (#5094)03ee48a
chore: Update version for release (pre) (#5066)258787e
chore: Update version for release (pre) (#5053)6fd7437
update changelogs46206a4
chore: Update version for release7f81a3e
chore: Update version for release (pre) (#5022)bbfbed2
chore: Update version for release (pre) (#5006)213d651
chore: Update version for release (pre) (#4955)0dc58d1
chore: Update version for release (pre) (#4953)f3ac648
chore: Update version for release (pre) (#4948)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)