Following the Family Tree

React: the twisting roots, branches, and leaves

Having a strong understanding of components can make learning React, a sometimes intimidating framework, feel more simple. If you don’t know what components are, let me tell you. Components are the building blocks of React. Like the roots, branches, and leaves of a tree, React components make up the application.

It’s important to know what order the building blocks are going in so that you can send data to each block accordingly. Think of the big foundational blocks as the parents and the blocks built on top of them are the children. The flow of data goes parent to child, so knowing the correct pairing of parent and children is crucial.

Knowing the ways the roots and branches flow is critical to the free flow of information. Just like a tree absorbs water through its roots and pushes it to the branches and leaves, so do components. Parent components are like the roots and branches, while leaves are the children components.

Often, we like to draw out the family tree so it’s easier to see the hierarchy. Similarly to the family trees you probably drew in school, the tree starts with the parent component and branches out with the children, then the grandchildren, and so on.

This tree is known as the Render Tree. The tree is composed of nodes, each representing a different component. The root node is the root of the tree, the root of the app itself. A render tree represents a single render pass. This means that there are other paths the app can take when rendering, this is called conditional rendering. This is when a parent component renders different children based on the data it’s passed. For instance, you may have a site that requires users to sign in for full access. We might have a component that should display a welcome message if the user is logged in, and a login prompt if they are not.

We can achieve this using conditional rendering:

import React from 'react';

function UserGreeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome back, user!</p>;
  } else {
    return <p>Please log in to continue.</p>;
  }
}

// Usage:
function App() {
  const userIsLoggedIn = true; // Set this based on your authentication state
  return (
    <div>
      <h1>My App</h1>
      <UserGreeting isLoggedIn={userIsLoggedIn} />
    </div>
  );
}

export default App;

In this example, the UserGreeting component conditionally renders either the welcome message or the login prompt based on the value of isLoggedIn. If isLoggedIn is true, then it will displays the welcome message; otherwise, the login prompt will render.

Although the render tree may be different for each render, it is a good tool to use none the less. The render tree is helpful in identifying the highest level root parent and leaf child components. Leaf components are usually frequently re-rendered and typically do not have child components of their own.

There are other types of trees one can use to model relationships between components but the render tree is a good place to start.