Skip to content

Commit 0f33f7a

Browse files
committed
New terminology
parent Component stack -> Component Stack owner Component stack -> Owner Stack
1 parent cb8ac7d commit 0f33f7a

File tree

3 files changed

+23
-23
lines changed

3 files changed

+23
-23
lines changed

src/content/reference/react-dom/client/createRoot.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ An app fully built with React will usually only have one `createRoot` call for i
4545
4646
* **optional** `options`: An object with options for this React root.
4747
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`.
5151
* **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.
5252
5353
#### Returns {/*returns*/}
@@ -369,7 +369,7 @@ root.render(<App />);
369369
The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
370370
371371
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.
373373
374374
You can use the `onUncaughtError` root option to display error dialogs:
375375
@@ -600,7 +600,7 @@ root.render(<App />);
600600
The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
601601
602602
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.
604604
605605
You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
606606

src/content/reference/react-dom/client/hydrateRoot.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
4141
4242
* **optional** `options`: An object with options for this React root.
4343
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`.
4747
* **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.
4848
4949
@@ -400,7 +400,7 @@ root.render(<App />);
400400
The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
401401
402402
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.
404404
405405
You can use the `onUncaughtError` root option to display error dialogs:
406406
@@ -635,7 +635,7 @@ root.render(<App />);
635635
The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
636636
637637
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.
639639
640640
You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
641641
@@ -916,7 +916,7 @@ const root = hydrateRoot(
916916
The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
917917
918918
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.
920920
921921
You can use the `onRecoverableError` root option to display error dialogs for hydration mismatches:
922922

src/content/reference/react/captureOwnerStack.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Experimental versions of React may contain bugs. Don't use them in production.
1616

1717
<Intro>
1818

19-
`captureOwnerStack` reads the current **owner** Component stack and returns it as a string if available.
19+
`captureOwnerStack` reads the current Owner Stack and returns it as a string if available.
2020

2121
```js
2222
const stack = captureOwnerStack();
@@ -32,7 +32,7 @@ const stack = captureOwnerStack();
3232

3333
### `captureOwnerStack()` {/*captureownerstack*/}
3434

35-
Call `captureOwnerStack` to get the current owner Component stack.
35+
Call `captureOwnerStack` to get the current Owner Stack.
3636

3737
```js
3838
import * as React from 'react';
@@ -53,12 +53,12 @@ function Component() {
5353

5454
`captureOwnerStack` returns `string | null`.
5555

56-
If no owner stack is available, it returns an empty string.
56+
If no Owner Stack is available, it returns an empty string.
5757
Outside of development builds, `null` is returned.
5858

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*/}
6060

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).
6262

6363
For example, consider the following code:
6464

@@ -104,7 +104,7 @@ createRoot(document.createElement('div')).render(
104104
```
105105

106106
`SubComponent` would throw an error.
107-
The **parent** component stack of that error would be
107+
The Component Stack of that error would be
108108

109109
```
110110
at SubComponent
@@ -115,29 +115,29 @@ at React.Suspense
115115
at App
116116
```
117117

118-
However, the owner stack would only read
118+
However, the Owner Stack would only read
119119

120120
```
121121
at SubComponent
122122
at Component
123123
```
124124

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 />`.
126126

127127
Neither `Navigation` nor `legend` are in the stack at all since it's only a sibling to a node containing `<SubComponent />`.
128128

129129
### When to use which {/*when-to-use-which*/}
130130

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).
132132

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" />`.
134134

135135
## Usage {/*usage*/}
136136

137137
### Expanding error stacks {/*expanding-error-stacks*/}
138138

139-
In addition to the stack trace of the <CodeStep step={1}>error</CodeStep> itself, you can use <CodeStep step={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 <CodeStep step={1}>error</CodeStep> itself, you can use <CodeStep step={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.
141141

142142
```jsx [[9, 15, "error"], [34, 10, "captureOwnerStack"]]
143143
import { captureOwnerStack } from 'react'

0 commit comments

Comments
 (0)