From 52a09634e6033bad4bde4be54684f816b4892b34 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 18:18:49 +0000 Subject: [PATCH 01/17] Add Error Boundary to useTransition docs --- src/components/MDX/Sandpack/Preview.tsx | 5 ++ src/content/reference/react/useTransition.md | 86 ++++++++++++++++++++ 2 files changed, 91 insertions(+) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index 8d83d98678f..09e2e17d46d 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -52,6 +52,11 @@ export function Preview({ rawError = null; } + // When using Error Boundary - we want to disble the error dialog to show fallback + if (rawError && rawError.message.includes('throw new 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..c74efdfeed8 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1501,6 +1501,92 @@ main { --- +### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/} + +If you'd like to display an error to your users when using startTransition, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). + + + +```js message.js active + +import { useTransition } from "react"; +import { ErrorBoundary } from "react-error-boundary"; + +export function MessageContainer() { + return ( + ⚠️Something went wrong

}> + + + ); +} + +function Message() { + const [pending, startTransition] = useTransition(); + function handleTransition(){ + throw new Error(); + } + + return ( + + ); +} +``` + +```js App.js hidden +import { MessageContainer } from "./message.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( + + + +); +``` + +```css +body > iframe { + display: none; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "experimental", + "react-dom": "experimental", + "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*/} From d55e4a26b562154730e01c940ebb96eac2668568 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 19:02:03 +0000 Subject: [PATCH 02/17] add Error Boundary to useTransition --- src/content/reference/react/useTransition.md | 43 ++++++++++---------- src/sidebarReference.json | 3 +- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index c74efdfeed8..051ecb5cf1f 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1,5 +1,6 @@ --- title: useTransition +canary: true --- @@ -1503,45 +1504,51 @@ main { ### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/} -If you'd like to display an error to your users when using startTransition, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-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 you'd like to display an error to your users when using `useTransition`, you can use 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. If the function in `startTransition` is rejected the fallback for the error boundary will be displayed. -```js message.js active +```js SubmitContainer.js active import { useTransition } from "react"; import { ErrorBoundary } from "react-error-boundary"; -export function MessageContainer() { +export function SubmitContainer() { return ( ⚠️Something went wrong

}> - + ); } -function Message() { +function SubmitButton() { const [pending, startTransition] = useTransition(); - function handleTransition(){ - throw new Error(); - } return ( + startTransition(() => { + throw new Error(); + }); + }}> + Submit + ); } ``` ```js App.js hidden -import { MessageContainer } from "./message.js"; +import { SubmitContainer } from "./SubmitContainer.js"; export default function App() { - return ; + return ; } ``` @@ -1566,17 +1573,11 @@ root.render( ); ``` -```css -body > iframe { - display: none; -} -``` - ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, diff --git a/src/sidebarReference.json b/src/sidebarReference.json index f9049956f2d..cc7be8f752d 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 } ] }, From 81fdcc927a9f2dd963ac5c7f9d07ec2977b671f0 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 19:26:31 +0000 Subject: [PATCH 03/17] Use Canary --- src/content/reference/react/useTransition.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 051ecb5cf1f..3370d7e7b15 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1504,11 +1504,11 @@ 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 you'd like to display an error to your users when using `useTransition`, you can use 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. If the function in `startTransition` is rejected the fallback for the error boundary will be displayed. From 27b67c053a677b5da88b20104ee3431497e3bb4d Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 19:54:12 +0000 Subject: [PATCH 04/17] Add Error Boundary to useTransition API docs --- src/components/MDX/Sandpack/Preview.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index 09e2e17d46d..fabcef8d982 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -52,7 +52,8 @@ export function Preview({ rawError = null; } - // When using Error Boundary - we want to disble the error dialog to show fallback + // When throwing a new Error in Sandpack - we want to disble the dev error dialog + // to show the Error Boundary fallback if (rawError && rawError.message.includes('throw new Error()')) { rawError = null; } From 968519f4afaf8823f9f9ce6ea678fa4e02e063e2 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Fri, 20 Oct 2023 11:47:08 -0400 Subject: [PATCH 05/17] Update src/components/MDX/Sandpack/Preview.tsx Co-authored-by: Jan Kassens --- src/components/MDX/Sandpack/Preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index fabcef8d982..da8960dbe3b 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -52,7 +52,7 @@ export function Preview({ rawError = null; } - // When throwing a new Error in Sandpack - we want to disble the dev error dialog + // 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 new Error()')) { rawError = null; From 5c82540ca5d7704e31664ad5129e20f137d70e4c Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Fri, 20 Oct 2023 11:47:24 -0400 Subject: [PATCH 06/17] Update src/content/reference/react/useTransition.md Co-authored-by: Luna --- src/content/reference/react/useTransition.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 3370d7e7b15..e8473c3e206 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1515,7 +1515,6 @@ If you'd like to display an error to your users when using `useTransition`, you ```js SubmitContainer.js active - import { useTransition } from "react"; import { ErrorBoundary } from "react-error-boundary"; From 0e32e43e0705e96aa58769682e6da77eefc14bcf Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Fri, 20 Oct 2023 11:47:54 -0400 Subject: [PATCH 07/17] Update src/content/reference/react/useTransition.md Co-authored-by: Luna --- src/content/reference/react/useTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index e8473c3e206..8142636aa1d 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1510,7 +1510,7 @@ Error Boundary for useTransition is currently only available in React's canary a -If you'd like to display an error to your users when using `useTransition`, you can use 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. If the function in `startTransition` is rejected the fallback for the error boundary will be displayed. +If you'd like to display an error to your users when using `useTransition`, you can use 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. If the function passed to `startTransition` is rejected, the fallback for the error boundary will be displayed. From b8ccee1b78dbc33144c1e3bf9dd430aa82ae476c Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 18:18:49 +0000 Subject: [PATCH 08/17] Add Error Boundary to useTransition docs --- src/components/MDX/Sandpack/Preview.tsx | 5 ++ src/content/reference/react/useTransition.md | 86 ++++++++++++++++++++ 2 files changed, 91 insertions(+) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index 8d83d98678f..09e2e17d46d 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -52,6 +52,11 @@ export function Preview({ rawError = null; } + // When using Error Boundary - we want to disble the error dialog to show fallback + if (rawError && rawError.message.includes('throw new 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..c74efdfeed8 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1501,6 +1501,92 @@ main { --- +### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/} + +If you'd like to display an error to your users when using startTransition, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). + + + +```js message.js active + +import { useTransition } from "react"; +import { ErrorBoundary } from "react-error-boundary"; + +export function MessageContainer() { + return ( + ⚠️Something went wrong

}> + + + ); +} + +function Message() { + const [pending, startTransition] = useTransition(); + function handleTransition(){ + throw new Error(); + } + + return ( + + ); +} +``` + +```js App.js hidden +import { MessageContainer } from "./message.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( + + + +); +``` + +```css +body > iframe { + display: none; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "experimental", + "react-dom": "experimental", + "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*/} From 8dd46446ca4af951c28cae1e6d16706f98bf6223 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 19:02:03 +0000 Subject: [PATCH 09/17] add Error Boundary to useTransition --- src/content/reference/react/useTransition.md | 43 ++++++++++---------- src/sidebarReference.json | 3 +- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index c74efdfeed8..051ecb5cf1f 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1,5 +1,6 @@ --- title: useTransition +canary: true --- @@ -1503,45 +1504,51 @@ main { ### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/} -If you'd like to display an error to your users when using startTransition, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-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 you'd like to display an error to your users when using `useTransition`, you can use 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. If the function in `startTransition` is rejected the fallback for the error boundary will be displayed. -```js message.js active +```js SubmitContainer.js active import { useTransition } from "react"; import { ErrorBoundary } from "react-error-boundary"; -export function MessageContainer() { +export function SubmitContainer() { return ( ⚠️Something went wrong

}> - + ); } -function Message() { +function SubmitButton() { const [pending, startTransition] = useTransition(); - function handleTransition(){ - throw new Error(); - } return ( + startTransition(() => { + throw new Error(); + }); + }}> + Submit + ); } ``` ```js App.js hidden -import { MessageContainer } from "./message.js"; +import { SubmitContainer } from "./SubmitContainer.js"; export default function App() { - return ; + return ; } ``` @@ -1566,17 +1573,11 @@ root.render( ); ``` -```css -body > iframe { - display: none; -} -``` - ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, 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 } ] }, From 6f1f186cc6f2e304c7282ee73f2bda0f56815c4b Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 19:26:31 +0000 Subject: [PATCH 10/17] Use Canary --- src/content/reference/react/useTransition.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 051ecb5cf1f..3370d7e7b15 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1504,11 +1504,11 @@ 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 you'd like to display an error to your users when using `useTransition`, you can use 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. If the function in `startTransition` is rejected the fallback for the error boundary will be displayed. From eefa05f67320f997e7d026c6b9fbd718d6d70708 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 17 Oct 2023 19:54:12 +0000 Subject: [PATCH 11/17] Add Error Boundary to useTransition API docs --- src/components/MDX/Sandpack/Preview.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index 09e2e17d46d..fabcef8d982 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -52,7 +52,8 @@ export function Preview({ rawError = null; } - // When using Error Boundary - we want to disble the error dialog to show fallback + // When throwing a new Error in Sandpack - we want to disble the dev error dialog + // to show the Error Boundary fallback if (rawError && rawError.message.includes('throw new Error()')) { rawError = null; } From 8305c51fe818f14974a73ae34d4e97e0601418dc Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Fri, 20 Oct 2023 11:47:08 -0400 Subject: [PATCH 12/17] Update src/components/MDX/Sandpack/Preview.tsx Co-authored-by: Jan Kassens --- src/components/MDX/Sandpack/Preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index fabcef8d982..da8960dbe3b 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -52,7 +52,7 @@ export function Preview({ rawError = null; } - // When throwing a new Error in Sandpack - we want to disble the dev error dialog + // 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 new Error()')) { rawError = null; From b75dbe8c91ad8333c0291949b173629f8b56ef8c Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Fri, 20 Oct 2023 11:47:24 -0400 Subject: [PATCH 13/17] Update src/content/reference/react/useTransition.md Co-authored-by: Luna --- src/content/reference/react/useTransition.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 3370d7e7b15..e8473c3e206 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1515,7 +1515,6 @@ If you'd like to display an error to your users when using `useTransition`, you ```js SubmitContainer.js active - import { useTransition } from "react"; import { ErrorBoundary } from "react-error-boundary"; From e1cc20029b39ea06556dfd5e8b9704fd60f08597 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Fri, 20 Oct 2023 11:47:54 -0400 Subject: [PATCH 14/17] Update src/content/reference/react/useTransition.md Co-authored-by: Luna --- src/content/reference/react/useTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index e8473c3e206..8142636aa1d 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1510,7 +1510,7 @@ Error Boundary for useTransition is currently only available in React's canary a -If you'd like to display an error to your users when using `useTransition`, you can use 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. If the function in `startTransition` is rejected the fallback for the error boundary will be displayed. +If you'd like to display an error to your users when using `useTransition`, you can use 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. If the function passed to `startTransition` is rejected, the fallback for the error boundary will be displayed. From ea695d9d2cdb7748a16985e9e112987f216d0afb Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Mon, 23 Oct 2023 16:18:01 -0700 Subject: [PATCH 15/17] Address comments and update usage example --- src/components/MDX/Sandpack/Preview.tsx | 2 +- src/content/reference/react/useTransition.md | 47 ++++++++++++-------- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index da8960dbe3b..059645550c7 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -54,7 +54,7 @@ export function Preview({ // 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 new Error()')) { + if (rawError && rawError.message.includes(`throw Error('Example error')`)) { rawError = null; } diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 8142636aa1d..b792513381f 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -152,7 +152,7 @@ export default function TabContainer() { function selectTab(nextTab) { startTransition(() => { - setTab(nextTab); + setTab(nextTab); }); } @@ -824,7 +824,7 @@ function use(promise) { reason => { promise.status = 'rejected'; promise.reason = reason; - }, + }, ); throw promise; } @@ -1018,7 +1018,7 @@ function use(promise) { reason => { promise.status = 'rejected'; promise.reason = reason; - }, + }, ); throw promise; } @@ -1289,7 +1289,7 @@ function use(promise) { reason => { promise.status = 'rejected'; promise.reason = reason; - }, + }, ); throw promise; } @@ -1333,7 +1333,7 @@ function use(promise) { reason => { promise.status = 'rejected'; promise.reason = reason; - }, + }, ); throw promise; } @@ -1380,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.`; } @@ -1514,40 +1514,49 @@ If you'd like to display an error to your users when using `useTransition`, you -```js SubmitContainer.js active +```js AddCommentContainer.js active import { useTransition } from "react"; import { ErrorBoundary } from "react-error-boundary"; -export function SubmitContainer() { +export function AddCommentContainer() { return ( ⚠️Something went wrong

}> - + ); } -function SubmitButton() { +function addComment(comment) { + // For demonstration purposes to show Error Boundary + if(comment == null){ + throw Error('Example error') + } +} + +function AddCommentButton() { const [pending, startTransition] = useTransition(); return ( - + Add comment + ); } ``` ```js App.js hidden -import { SubmitContainer } from "./SubmitContainer.js"; +import { AddCommentContainer } from "./AddCommentContainer.js"; export default function App() { - return ; + return ; } ``` From ab759f451dd25bc865fc0b1516df4418d5481c17 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Mon, 23 Oct 2023 16:43:55 -0700 Subject: [PATCH 16/17] Address comments and update usage example --- src/content/reference/react/useTransition.md | 25 +++++++++++++------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index 1cc73cb1fed..b792513381f 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1514,19 +1514,26 @@ If you'd like to display an error to your users when using `useTransition`, you -```js SubmitContainer.js active +```js AddCommentContainer.js active import { useTransition } from "react"; import { ErrorBoundary } from "react-error-boundary"; -export function SubmitContainer() { +export function AddCommentContainer() { return ( ⚠️Something went wrong

}> - + ); } -function SubmitButton() { +function addComment(comment) { + // For demonstration purposes to show Error Boundary + if(comment == null){ + throw Error('Example error') + } +} + +function AddCommentButton() { const [pending, startTransition] = useTransition(); return ( @@ -1534,20 +1541,22 @@ function SubmitButton() { disabled={pending} onClick={() => { startTransition(() => { - throw new Error(); + // Intentionally not passing a comment + // so error gets thrown + addComment(); }); }}> - Submit + Add comment ); } ``` ```js App.js hidden -import { SubmitContainer } from "./SubmitContainer.js"; +import { AddCommentContainer } from "./AddCommentContainer.js"; export default function App() { - return ; + return ; } ``` From 1c1dd164f5e07cb85cfecae207aa16115db0abf2 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 24 Oct 2023 14:21:14 -0700 Subject: [PATCH 17/17] Update src/content/reference/react/useTransition.md Co-authored-by: Luna --- src/content/reference/react/useTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index b792513381f..1d808aac255 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -1510,7 +1510,7 @@ Error Boundary for useTransition is currently only available in React's canary a -If you'd like to display an error to your users when using `useTransition`, you can use 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. If the function passed to `startTransition` is rejected, the fallback for the error boundary will be displayed. +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.