-
-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add future.v7_startTransition flag #10596
Merged
Merged
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
9e977e3
Add future.v7_startTransition flag
brophdawg11 bddcbfb
bunmp bundle
brophdawg11 b27fcfa
Inline check
brophdawg11 458746b
Remove uneeded null comparison
brophdawg11 9e675c7
Move startTransition loading to it's own file
brophdawg11 2a7eb39
Destructure future prop
brophdawg11 2eac9cb
Bump bundle
brophdawg11 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
--- | ||
"react-router": minor | ||
"react-router-dom": minor | ||
--- | ||
|
||
Move [`React.startTransition`](https://react.dev/reference/react/startTransition) behind a [future flag](https://reactrouter.com/en/main/guides/api-development-strategy) to avoid issues with existing incompatible `Suspense` usages. We recommend folks adopting this flag to be better compatible with React concurrent mode, but if you run into issues you can continue without the use of `startTransition` until v7. Issues usually boils down to creating net-new promises during the render cycle, so if you run into issues you should either lift your promise creation out of the render cycle or put it behind a `useMemo`. | ||
|
||
Existing behavior will no longer include `React.startTransition`: | ||
|
||
```jsx | ||
<BrowserRouter> | ||
<Routes>{/*...*/}</Routes> | ||
</BrowserRouter> | ||
|
||
<RouterProvider router={router} /> | ||
``` | ||
|
||
If you wish to enable `React.startTransition`, pass the future flag to your component: | ||
|
||
```jsx | ||
<BrowserRouter future={{ v7_startTransition: true }}> | ||
<Routes>{/*...*/}</Routes> | ||
</BrowserRouter> | ||
|
||
<RouterProvider router={router} future={{ v7_startTransition: true }}/> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -49,12 +49,46 @@ The lifecycle is thus either: | |
|
||
## Current Future Flags | ||
|
||
Here's the current future flags in React Router v6 today: | ||
Here's the current future flags in React Router v6 today. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this feel confusing? Some flags are router-only and have nothing to do with rendering, others are render-only so I kept them split, but this does mean we export a |
||
|
||
### `@remix-run/router` Future Flags | ||
|
||
These flags are only applicable when using a [Data Router][picking-a-router] and are passed when creating the `router` instance: | ||
|
||
```js | ||
const router = createBrowserRouter(routes, { | ||
future: { | ||
v7_normalizeFormMethod: true, | ||
}, | ||
}); | ||
``` | ||
|
||
| Flag | Description | | ||
| ------------------------ | --------------------------------------------------------------------- | | ||
| `v7_normalizeFormMethod` | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method | | ||
|
||
### React Router Future Flags | ||
|
||
These flags apply to both Data and non-Data Routers and are passed to the rendered React component: | ||
|
||
```jsx | ||
<BrowserRouter future={{ v7_normalizeFormMethod: true }}> | ||
<Routes>{/*...*/}</Routes> | ||
</BrowserRouter> | ||
``` | ||
|
||
```jsx | ||
<RouterProvider | ||
router={router} | ||
future={{ v7_normalizeFormMethod: true }} | ||
/> | ||
``` | ||
|
||
| Flag | Description | | ||
| -------------------- | --------------------------------------------------------------------------- | | ||
| `v7_startTransition` | Wrap all router state updates in [`React.startTransition`][starttransition] | | ||
|
||
[future-flags-blog-post]: https://remix.run/blog/future-flags | ||
[feature-flowchart]: https://remix.run/docs-images/feature-flowchart.png | ||
[picking-a-router]: ../routers/picking-a-router | ||
[starttransition]: https://react.dev/reference/react/startTransition |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this is a new future flag it'll be a new 6.13.0 minor release