diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 8d83d98678f..059645550c7 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -52,6 +52,12 @@ export function Preview({
rawError = null;
}
+ // When throwing a new Error in Sandpack - we want to disable the dev error dialog
+ // to show the Error Boundary fallback
+ if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
+ rawError = null;
+ }
+
// Memoized because it's fed to debouncing.
const firstLintError = useMemo(() => {
if (lintErrors.length === 0) {
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a6fcde7107f..1d808aac255 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1,5 +1,6 @@
---
title: useTransition
+canary: true
---
@@ -151,7 +152,7 @@ export default function TabContainer() {
function selectTab(nextTab) {
startTransition(() => {
- setTab(nextTab);
+ setTab(nextTab);
});
}
@@ -823,7 +824,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1017,7 +1018,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1288,7 +1289,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1332,7 +1333,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1379,9 +1380,9 @@ async function getBio() {
setTimeout(resolve, 500);
});
- return `The Beatles were an English rock band,
- formed in Liverpool in 1960, that comprised
- John Lennon, Paul McCartney, George Harrison
+ return `The Beatles were an English rock band,
+ formed in Liverpool in 1960, that comprised
+ John Lennon, Paul McCartney, George Harrison
and Ringo Starr.`;
}
@@ -1501,6 +1502,100 @@ main {
---
+### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+
+
+Error Boundary for useTransition is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
+
+
+
+```js AddCommentContainer.js active
+import { useTransition } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function AddCommentContainer() {
+ return (
+ ⚠️Something went wrong
}>
+
+
+ );
+}
+
+function addComment(comment) {
+ // For demonstration purposes to show Error Boundary
+ if(comment == null){
+ throw Error('Example error')
+ }
+}
+
+function AddCommentButton() {
+ const [pending, startTransition] = useTransition();
+
+ return (
+
+ );
+}
+```
+
+```js App.js hidden
+import { AddCommentContainer } from "./AddCommentContainer.js";
+
+export default function App() {
+ return ;
+}
+```
+
+```js index.js hidden
+// TODO: update to import from stable
+// react instead of canary once the `use`
+// Hook is in a stable release of React
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+// TODO: update this example to use
+// the Codesandbox Server Component
+// demo environment once it is created
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "canary",
+ "react-dom": "canary",
+ "react-scripts": "^5.0.0",
+ "react-error-boundary": "4.0.3"
+ },
+ "main": "/index.js"
+}
+```
+
+
+---
+
## Troubleshooting {/*troubleshooting*/}
### Updating an input in a transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/}
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 3c8daf71ab7..acc93328ace 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -73,7 +73,8 @@
},
{
"title": "useTransition",
- "path": "/reference/react/useTransition"
+ "path": "/reference/react/useTransition",
+ "canary": true
}
]
},