From 04a1bd4fbb89cb65eded9303a3e9208d06353b5c Mon Sep 17 00:00:00 2001 From: Mahi Date: Fri, 23 Oct 2026 11:50:12 +0530 Subject: [PATCH 1/2] Clarify child element rendering behaviour --- src/content/learn/understanding-your-ui-as-a-tree.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index afc38cd332f..2a7d90de2e6 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -131,6 +131,16 @@ The tree is composed of nodes, each of which represents a component. `App`, `Fan The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component. +### How passing children affects component rendering {/*how-passing-children-affects-component-rendering*/} + +When a component creates a child element directly in its own JSX , it creates a new React element each time it renders. When a component receives a child element through its `children` prop , React can reuse that element when the component updates its own state without its parent rendering again. + +In the above example , `App` creates the `Copyright` and passes it to `InspirationGenerator` through `children`. If `InspirationGenerator` updates its own state without `App` rendering again , React can reuse the same `Copyright` element without rendering the `Copyright` again. + +By contrast , if `App` creates directly in its JSX , rendering `App` again creates a new element , React may render `FancyText` again as part of the render. + +Passing children through props doesn't prevent all re-renders. A child can still render when its own state or context changes , or when its parent renders and creates a new element. + #### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/} From a47490c7cec9f94c046a82ee85cad5e0e65a3db8 Mon Sep 17 00:00:00 2001 From: Mahi Date: Fri, 23 Oct 2026 12:30:02 +0530 Subject: [PATCH 2/2] Clarify child element rendering behaviour --- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 2a7d90de2e6..e5b17095285 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -137,7 +137,7 @@ When a component creates a child element directly in its own JSX , it creates a In the above example , `App` creates the `Copyright` and passes it to `InspirationGenerator` through `children`. If `InspirationGenerator` updates its own state without `App` rendering again , React can reuse the same `Copyright` element without rendering the `Copyright` again. -By contrast , if `App` creates directly in its JSX , rendering `App` again creates a new element , React may render `FancyText` again as part of the render. +By contrast , when a parent componenet creates a child element directly in its JSX , rendering the parent again creates a new element , and React may render that child again as part of the render. Passing children through props doesn't prevent all re-renders. A child can still render when its own state or context changes , or when its parent renders and creates a new element.