Intro

Hi there! It's Howard from Web Dev Distilled. 😎

In this article, let's talk about Components, Instances, and Elements in React.

Knowing about the difference between these 3 things will make it more clear about what actually happens with your components when you use them.

In addition, this is a pretty common React interview question. This topic is definitely worth learning about!

---

Component

Definition

👉 is a Description of a piece of UI

👉 is a FUNCTION that returns React Elements (Element tree), usually written in JSX

👉 is a "blueprint" or a "template"

Example of a Component

function Chart() {
    return (
        <div className="chart-content"> 
            <h3>Statistic</h3>
            <p>All of the statistic data will be visible here!</p>
        </div>
    )
}

👉 out of this one "Blueprint" or "template"

\=> React then create ONE or MORE multiple COMPONENT INSTANCES

👉 React does this each time we use this component somewhere in our code!

---

Component Instance

Definition

👉 Instances are created when we "use" components.

👉 React internally invoked (called) the Chart() 3 times (look at the code example below 👇)

👉 In other words, Instances are actual "Physical" manifestations of a Component

👉 If we call the Chart() 3 times, React will create 3 completely different components, they have their own props and state.

👉 Instance has a lifecycle (can be "Born" => "Live" => eventually "Die" )

In practice

The term "Component" and "Component Instances" can be used interchangeably.

For instance, we just say "Component Lifecycle" rather than "Component Instance Lifecycle".

On top of that, we also say "UI made up by Components" not "UI made up by Component Instances"

Even though, "Component Instances" will technically be more accurate!

Code Example

function App() {
    return (
        <div className="charts">
            <Chart />
            <Chart />
            <Chart />        
        </div>
    );
}

---

React Elements

React executes the code in each of these Instances.

Each Instance will return one or more React Elements.

👉 JSX is converted to React.createElement() function calls

Go back to the Chart Component we have before

function Chart() {
    return (
        <div className="chart-content"> 
            <h3>Statistic</h3>
            <p>All of the statistic data will be visible here!</p>
        </div>
    )
}

Behind the scenes, the JSX will be converted to

React.createElement(
    "div",
    {
        className: "chart-content"    
    },
    React.createElement(
        "h3",
        null,
        "Statistic"
    ),
    React.createElement(
        "p",
        null,
        "All of the statistic data will be visible here!"
    )
)

👉 A React Element is the result of these function calls.

It's simply a big immutable JavaScript Object that React keeps in Memory.

Here's an example of what this Object will look like:

👉 React Element basically contains all the information that is necessary to create DOM elements.

Ultimately, this React Element will be converted to actual DOM Elements and then painted to the screen by the browser.

DOM Element (Actual HTML)

<div class="chart-content">
        <h3>Statistic</h3>
        <p>All of the statistic data will be visible here!</p>
</div>

It's an actual visual representation of the component instance in the browser.

It's NOT React Elements that are rendered to the DOM.

React Elements just LIVE inside React App, it has nothing to do with the DOM.

They're simply converted to the DOM Element when they are painted on the screen in the Final step.

---

Summary

Generally speaking, we just went through an entire process.

From writing a Single Component.

To use it multiple times in our code as a "blueprint" by creating its Instances

Then it is converted into React Elements.

Finally Rendered as HTML Elements to the DOM.