Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos em inglês.
      3. Apenas transcreva o artigo para um português mais simples, tornando ele mais literal e direto, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      #thedivisor#Although render trees may differ across render passes, these trees are generally helpful for identifying what the <em>top-level</em> and <em>leaf components</em> 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.#thedivisor#Identifying these categories of components are useful for understanding data flow and performance of your app.#thedivisor#Another relationship in a React app that can be modeled with a tree are an app’s module dependencies. As we <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/importing-and-exporting-components#exporting-and-importing-a-component">break up our components</a> and logic into separate files, we create <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">JS modules</a> where we may export components, functions, or constants.#thedivisor#Each node in a module dependency tree is a module and each branch represents an <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">import</code> statement in that module.#thedivisor#If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short.#thedivisor#The module dependency tree for the Inspirations app.#thedivisor#The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component.#thedivisor#Comparing to the render tree of the same app, there are similar structures but some notable differences:#thedivisor#<li class="leading-relaxed mb-1">The nodes that make-up the tree represent modules, not components.</li>
<li class="leading-relaxed mb-1">Non-component modules, like <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">inspirations.js</code>, are also represented in this tree. The render tree only encapsulates components.</li>
<li class="leading-relaxed mb-1"><code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Copyright.js</code> appears under <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">App.js</code> but in the render tree, <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Copyright</code>, the component, appears as a child of <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">InspirationGenerator</code>. This is because <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">InspirationGenerator</code> accepts JSX as <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/passing-props-to-a-component#passing-jsx-as-children">children props</a>, so it renders <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Copyright</code> as a child component but does not import the module.</li>#thedivisor#Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">bundler</a>, and bundlers will use the dependency tree to determine what modules should be included.