You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/client/createRoot.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -45,9 +45,9 @@ An app fully built with React will usually only have one `createRoot` call for i
45
45
46
46
* **optional** `options`: An object with options for this React root.
47
47
48
-
* **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the parent Component stack in `componentStack`.
49
-
* **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the parent Component stack in `componentStack`.
50
-
* **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the parent Component stack in `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
48
+
* **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
49
+
* **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
50
+
* **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
51
51
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
52
52
53
53
#### Returns {/*returns*/}
@@ -369,7 +369,7 @@ root.render(<App />);
369
369
The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
370
370
371
371
1. The <CodeStep step={2}>error</CodeStep> that was thrown.
372
-
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the parent Component stack in <CodeStep step={4}>componentStack</CodeStep> of the error.
372
+
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
373
373
374
374
You can use the `onUncaughtError` root option to display error dialogs:
375
375
@@ -600,7 +600,7 @@ root.render(<App />);
600
600
The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
601
601
602
602
1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
603
-
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the parent Component stack in <CodeStep step={4}>componentStack</CodeStep> of the error.
603
+
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
604
604
605
605
You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/client/hydrateRoot.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,9 +41,9 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
41
41
42
42
* **optional** `options`: An object with options for this React root.
43
43
44
-
* **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the parent Component stack in `componentStack`.
45
-
* **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the parent Component stack in `componentStack`.
46
-
* **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the parent Component stack in `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
44
+
* **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
45
+
* **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
46
+
* **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
47
47
* **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
48
48
49
49
@@ -400,7 +400,7 @@ root.render(<App />);
400
400
The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
401
401
402
402
1. The <CodeStep step={2}>error</CodeStep> that was thrown.
403
-
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the parent Component stack in <CodeStep step={4}>componentStack</CodeStep> of the error.
403
+
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
404
404
405
405
You can use the `onUncaughtError` root option to display error dialogs:
406
406
@@ -635,7 +635,7 @@ root.render(<App />);
635
635
The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
636
636
637
637
1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
638
-
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the parent Component stack in <CodeStep step={4}>componentStack</CodeStep> of the error.
638
+
2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
639
639
640
640
You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
641
641
@@ -916,7 +916,7 @@ const root = hydrateRoot(
916
916
The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
917
917
918
918
1. The <CodeStep step={2}>error</CodeStep> React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>.
919
-
2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the parent Component stack in <CodeStep step={5}>componentStack</CodeStep> of the error.
919
+
2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
920
920
921
921
You can use the `onRecoverableError` root option to display error dialogs for hydration mismatches:
Call `captureOwnerStack` to get the current owner Component stack.
35
+
Call `captureOwnerStack` to get the current Owner Stack.
36
36
37
37
```js
38
38
import*asReactfrom'react';
@@ -53,12 +53,12 @@ function Component() {
53
53
54
54
`captureOwnerStack` returns `string | null`.
55
55
56
-
If no owner stack is available, it returns an empty string.
56
+
If no Owner Stack is available, it returns an empty string.
57
57
Outside of development builds, `null` is returned.
58
58
59
-
## Owner Component stacks vs parent Component stacks {/*owner-component-stacks-vs-parent-component-stacks*/}
59
+
## Owner Stack vs Component Stack {/*owner-stack-vs-component-stack*/}
60
60
61
-
The owner Component stack is different from the **parent**Component stack available error handlers like [`errorInfo.componentStack` in `onUncaughtError`](http://localhost:3000/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors).
61
+
The Owner Stack is different from the Component Stack available error handlers like [`errorInfo.componentStack` in `onUncaughtError`](/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors).
The **parent** component stack of that error would be
107
+
The Component Stack of that error would be
108
108
109
109
```
110
110
at SubComponent
@@ -115,29 +115,29 @@ at React.Suspense
115
115
at App
116
116
```
117
117
118
-
However, the owner stack would only read
118
+
However, the Owner Stack would only read
119
119
120
120
```
121
121
at SubComponent
122
122
at Component
123
123
```
124
124
125
-
Neither `App` nor the DOM components (e.g. `fieldset`) are considered owners in this stack since they didn't contribute to "creating" the node containing `SubComponent`. `App` and DOM components only forwarded the node. `App` just rendered the `children` node as opposed to `Component` which created a node containing `SubComponent` via `<SubComponent />`.
125
+
Neither `App` nor the DOM components (e.g. `fieldset`) are considered Owners in this Stack since they didn't contribute to "creating" the node containing `SubComponent`. `App` and DOM components only forwarded the node. `App` just rendered the `children` node as opposed to `Component` which created a node containing `SubComponent` via `<SubComponent />`.
126
126
127
127
Neither `Navigation` nor `legend` are in the stack at all since it's only a sibling to a node containing `<SubComponent />`.
128
128
129
129
### When to use which {/*when-to-use-which*/}
130
130
131
-
The parent stack is useful for contextual information e.g. [`React.Suspense`](/reference/react/Suspense), [React Context](https://react.dev/reference/react/createContext), or [`<form>`](/reference/react-dom/components/form).
131
+
The Component Stack is useful for contextual information e.g. [`React.Suspense`](/reference/react/Suspense), [React Context](https://react.dev/reference/react/createContext), or [`<form>`](/reference/react-dom/components/form).
132
132
133
-
The owner stack is useful for tracing the flow of props. Owner stacks are equivalent to [call stacks](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack) if all JSX would be converted to direct function calls e.g. `Component({label: "disabled"})` instead of `<Component label="disabled" />`.
133
+
The Owner Stack is useful for tracing the flow of props. Owner stacks are equivalent to [call stacks](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack) if all JSX would be converted to direct function calls e.g. `Component({label: "disabled"})` instead of `<Component label="disabled" />`.
In addition to the stack trace of the <CodeStepstep={1}>error</CodeStep> itself, you can use <CodeStepstep={2}>`captureOwnerStack`</CodeStep> to append the stack trace of the owner Component.
140
-
This can help trace the error especially when the error is caused by props. The owner Component stack helps trace the flow of props.
139
+
In addition to the stack trace of the <CodeStepstep={1}>error</CodeStep> itself, you can use <CodeStepstep={2}>`captureOwnerStack`</CodeStep> to append the Owner Stack.
140
+
This can help trace the error especially when the error is caused by props. The Owner Stack helps trace the flow of props.
0 commit comments