From 7def565da04e2351556c63d17f35c632891a40e6 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 24 Oct 2023 16:48:05 +0900 Subject: [PATCH 1/3] Italicize "top-level" and "leaf components" --- 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 2a5a24b85cc..e66d9fa7257 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -253,7 +253,7 @@ With conditional rendering, across different renders, the render tree may render In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass. -Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. +Although render trees may differ across render pases, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. Identifying these categories of components are useful for understanding data flow and performance of your app. From 86a8065135abe538fe447b9770dfac767a975531 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 24 Oct 2023 16:52:18 +0900 Subject: [PATCH 2/3] Fix `` usage --- src/content/learn/describing-the-ui.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index e8b6440aa96..167fe5b7037 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -530,13 +530,21 @@ React uses trees to model the relationships between components and modules. A React render tree is a representation of the parent and child relationship between components. -An example React render tree. + + +An example React render tree. + + Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance. Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. -An example module dependency tree. + + +An example module dependency tree. + + A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. From a7fab53661990e28ded54033bc1d6dd1ea1d0dcc Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 24 Oct 2023 17:07:42 +0900 Subject: [PATCH 3/3] Fix typo: "pases" => "passes" --- 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 e66d9fa7257..98f60cea8c3 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -253,7 +253,7 @@ With conditional rendering, across different renders, the render tree may render In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass. -Although render trees may differ across render pases, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. +Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. Identifying these categories of components are useful for understanding data flow and performance of your app.