Skip to content
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 7 commits into from
Jun 13, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions .changeset/v7-start-transition.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
"react-router": minor
"react-router-dom": minor
Comment on lines +2 to +3
Copy link
Contributor Author

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

---

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 }}/>
```
36 changes: 35 additions & 1 deletion docs/guides/api-development-strategy.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 FutureConfig from both @remix-run/router and react-router.


### `@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
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,13 @@
"none": "45 kB"
},
"packages/react-router/dist/react-router.production.min.js": {
"none": "13.4 kB"
"none": "13.5 kB"
},
"packages/react-router/dist/umd/react-router.production.min.js": {
"none": "15.8 kB"
},
"packages/react-router-dom/dist/react-router-dom.production.min.js": {
"none": "12.0 kB"
"none": "12.1 kB"
},
"packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
"none": "18.0 kB"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
waitFor,
} from "@testing-library/react";
import { JSDOM } from "jsdom";
import LazyComponent from "./components//LazyComponent";

describe("Handles concurrent mode features during navigations", () => {
function getComponents() {
Expand Down Expand Up @@ -117,7 +116,7 @@ describe("Handles concurrent mode features during navigations", () => {
getComponents();

let { container } = render(
<MemoryRouter>
<MemoryRouter future={{ v7_startTransition: true }}>
<Routes>
<Route path="/" element={<Home />} />
<Route
Expand Down Expand Up @@ -149,7 +148,10 @@ describe("Handles concurrent mode features during navigations", () => {
getComponents();

let { container } = render(
<BrowserRouter window={getWindowImpl("/", false)}>
<BrowserRouter
window={getWindowImpl("/", false)}
future={{ v7_startTransition: true }}
>
<Routes>
<Route path="/" element={<Home />} />
<Route
Expand Down Expand Up @@ -181,7 +183,10 @@ describe("Handles concurrent mode features during navigations", () => {
getComponents();

let { container } = render(
<HashRouter window={getWindowImpl("/", true)}>
<HashRouter
window={getWindowImpl("/", true)}
future={{ v7_startTransition: true }}
>
<Routes>
<Route path="/" element={<Home />} />
<Route
Expand Down Expand Up @@ -235,7 +240,9 @@ describe("Handles concurrent mode features during navigations", () => {
</>
)
);
let { container } = render(<RouterProvider router={router} />);
let { container } = render(
<RouterProvider router={router} future={{ v7_startTransition: true }} />
);

await assertNavigation(container, resolve, resolveLazy);
});
Expand Down Expand Up @@ -288,7 +295,7 @@ describe("Handles concurrent mode features during navigations", () => {
getComponents();

let { container } = render(
<MemoryRouter>
<MemoryRouter future={{ v7_startTransition: true }}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
Expand All @@ -306,7 +313,10 @@ describe("Handles concurrent mode features during navigations", () => {
getComponents();

let { container } = render(
<BrowserRouter window-={getWindowImpl("/", true)}>
<BrowserRouter
window-={getWindowImpl("/", true)}
future={{ v7_startTransition: true }}
>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
Expand All @@ -324,7 +334,10 @@ describe("Handles concurrent mode features during navigations", () => {
getComponents();

let { container } = render(
<HashRouter window-={getWindowImpl("/", true)}>
<HashRouter
window-={getWindowImpl("/", true)}
future={{ v7_startTransition: true }}
>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
Expand All @@ -350,7 +363,9 @@ describe("Handles concurrent mode features during navigations", () => {
</>
)
);
let { container } = render(<RouterProvider router={router} />);
let { container } = render(
<RouterProvider router={router} future={{ v7_startTransition: true }} />
);

await assertNavigation(container, resolve, resolveLazy);
});
Expand Down
53 changes: 40 additions & 13 deletions packages/react-router-dom/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/
import * as React from "react";
import type {
FutureConfig,
Location,
NavigateOptions,
NavigationType,
Expand Down Expand Up @@ -33,7 +34,7 @@ import type {
Fetcher,
FormEncType,
FormMethod,
FutureConfig,
FutureConfig as RouterFutureConfig,
GetScrollRestorationKeyFunction,
HashHistory,
History,
Expand Down Expand Up @@ -209,7 +210,7 @@ declare global {

interface DOMRouterOpts {
basename?: string;
future?: Partial<Omit<FutureConfig, "v7_prependBasename">>;
future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
hydrationData?: HydrationState;
window?: Window;
}
Expand Down Expand Up @@ -297,6 +298,7 @@ function deserializeErrors(
export interface BrowserRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
window?: Window;
}

Expand Down Expand Up @@ -325,6 +327,7 @@ const startTransitionImpl = React[START_TRANSITION];
export function BrowserRouter({
basename,
children,
future,
window,
}: BrowserRouterProps) {
let historyRef = React.useRef<BrowserHistory>();
Expand All @@ -337,13 +340,17 @@ export function BrowserRouter({
action: history.action,
location: history.location,
});
let startTransition =
future && future.v7_startTransition && startTransitionImpl != null
? startTransitionImpl
: null;
let setState = React.useCallback(
(newState: { action: NavigationType; location: Location }) => {
startTransitionImpl
? startTransitionImpl(() => setStateImpl(newState))
startTransition
? startTransition(() => setStateImpl(newState))
: setStateImpl(newState);
},
[setStateImpl]
[setStateImpl, startTransition]
);

React.useLayoutEffect(() => history.listen(setState), [history, setState]);
Expand All @@ -362,14 +369,20 @@ export function BrowserRouter({
export interface HashRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
window?: Window;
}

/**
* A `<Router>` for use in web browsers. Stores the location in the hash
* portion of the URL so it is not sent to the server.
*/
export function HashRouter({ basename, children, window }: HashRouterProps) {
export function HashRouter({
basename,
children,
future,
window,
}: HashRouterProps) {
let historyRef = React.useRef<HashHistory>();
if (historyRef.current == null) {
historyRef.current = createHashHistory({ window, v5Compat: true });
Expand All @@ -380,13 +393,17 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
action: history.action,
location: history.location,
});
let startTransition =
future && future.v7_startTransition && startTransitionImpl != null
? startTransitionImpl
: null;
let setState = React.useCallback(
(newState: { action: NavigationType; location: Location }) => {
startTransitionImpl
? startTransitionImpl(() => setStateImpl(newState))
startTransition
? startTransition(() => setStateImpl(newState))
: setStateImpl(newState);
},
[setStateImpl]
[setStateImpl, startTransition]
);

React.useLayoutEffect(() => history.listen(setState), [history, setState]);
Expand All @@ -405,6 +422,7 @@ export function HashRouter({ basename, children, window }: HashRouterProps) {
export interface HistoryRouterProps {
basename?: string;
children?: React.ReactNode;
future?: FutureConfig;
history: History;
}

Expand All @@ -414,18 +432,27 @@ export interface HistoryRouterProps {
* two versions of the history library to your bundles unless you use the same
* version of the history library that React Router uses internally.
*/
function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
function HistoryRouter({
basename,
children,
future,
history,
}: HistoryRouterProps) {
let [state, setStateImpl] = React.useState({
action: history.action,
location: history.location,
});
let startTransition =
future && future.v7_startTransition && startTransitionImpl != null
? startTransitionImpl
: null;
let setState = React.useCallback(
(newState: { action: NavigationType; location: Location }) => {
startTransitionImpl
? startTransitionImpl(() => setStateImpl(newState))
startTransition
? startTransition(() => setStateImpl(newState))
: setStateImpl(newState);
},
[setStateImpl]
[setStateImpl, startTransition]
);

React.useLayoutEffect(() => history.listen(setState), [history, setState]);
Expand Down
Loading