?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    let guest = 0;
    
    function Cup() {
      // Bad: changing a preexisting variable!
      guest = guest + 1;
      return <h2>Tea cup for guest #{guest}</h2>;
    }
    
    export default function TeaSet() {
      return (
        <>
          <Cup />
          <Cup />
          <Cup />
        </>
      );
    }
    
    

Show more

You can make this component pure by passing a prop instead of modifying a
preexisting variable:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    function Cup({ guest }) {
      return <h2>Tea cup for guest #{guest}</h2>;
    }
    
    export default function TeaSet() {
      return (
        <>
          <Cup guest={1} />
          <Cup guest={2} />
          <Cup guest={3} />
        </>
      );
    }
    
    

##  Ready to learn this topic?

Read **[ Keeping Components Pure ](/learn/keeping-components-pure) ** to learn
how to write components as pure, predictable functions.

[ Read More  ](/learn/keeping-components-pure)

* * *

##  Your UI as a tree

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.

![A tree graph with five nodes, with each node representing a component. The
root node is located at the top the tree graph and is labelled 'Root
Component'. It has two arrows extending down to two nodes labelled 'Component
A' and 'Component C'. Each of the arrows is labelled with 'renders'.
'Component A' has a single 'renders' arrow to a node labelled 'Component B'.
'Component C' has a single 'renders' arrow to a node labelled 'Component
D'.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fgeneric_render_tree.dark.png&w=1080&q=75)

![A tree graph with five nodes, with each node representing a component. The
root node is located at the top the tree graph and is labelled 'Root
Component'. It has two arrows extending down to two nodes labelled 'Component
A' and 'Component C'. Each of the arrows is labelled with 'renders'.
'Component A' has a single 'renders' arrow to a node labelled 'Component B'.
'Component C' has a single 'renders' arrow to a node labelled 'Component
D'.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fgeneric_render_tree.png&w=1080&q=75)

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.

![A tree graph with five nodes. Each node represents a JavaScript module. The
top-most node is labelled 'RootModule.js'. It has three arrows extending to
the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is
labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that
points to a node labelled
'ModuleD.js'.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fgeneric_dependency_tree.dark.png&w=1080&q=75)

![A tree graph with five nodes. Each node represents a JavaScript module. The
top-most node is labelled 'RootModule.js'. It has three arrows extending to
the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is
labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that
points to a node labelled
'ModuleD.js'.](/_next/image?url=%2Fimages%2Fdocs%2Fdiagrams%2Fgeneric_dependency_tree.png&w=1080&q=75)

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