How React components work?
Tags: javascript, webdev, react, programming
Published: 2022-02-09 15:14:08

*React Components* are the fundamental building blocks of any React app. They allow us to simplify complex UIs by breaking them down into small chunks.

But as always every abstraction has its cost and the very concept of *React Components* confuses a lot of beginners, so let's figure it out!

## React Component vs React Component instance vs React Element

These three terms seemingly refer to a single thing - UI element on the screen. But it's not true.

### React Component
*React Component* is either a function or an ES6 class - nothing more, nothing less. You manage the state, handle events and implement other custom logic here. 
It never renders anything to the screen. Instead, you create its instance to do that.

```jsx
const TextButton = ({text}) => {
  return <button>{text}</button>;
}

// It becomes more obvious with class-based component
// because you extend React.Component, not React.Element
class ListItem extends React.Component {
  render() {
    return <li>{this.props.children}</li>;
  }
}
```

### React Component Instance
It's exactly what it sounds like. You may have an instance of the *React Component* only at run time. 
Also, you may have multiple instances, each with its own properties and local state. It happens when you use *React Component* more than once.

```jsx
class ListItem extends React.Component {
  constructor(props) {
	super(props);
    console.log(`This is instance ${this}`);
  }

  render() {
    return <li>{this.props.children}</li>;
  }
}

const App = () => {
  return (
    <ul>
      <ListItem>First item</ListItem>
      <ListItem>Second item</ListItem>
      <ListItem>Third item</ListItem>
    </ul>
  );
}
```

### React Element
*React Element* is what *React Component Instance* returns at run-time. It's a plain JavaScript object that completely describes a DOM node.
Multiple *React Elements* together form a virtual DOM, a tree-like structure that describes the UI of your React app.

```jsx
// After Babel
const App = () => {
  return React.createElement('ul', null, 
    React.createElement(ListItem, {children: 'First item'}),
    React.createElement(ListItem, {children: 'Second item'}),
    React.createElement(ListItem, {children: 'Third item'})
  )
}

// At run-time
const App = () => {
  return {
    "type": "ul", 
    "key": null, 
    "ref": null, 
    "props": { 
      "children": [
        { 
          "type": class ListItem,
          "key": null, 
          "ref": null, 
          "props": { 
            "children": "First item" 
          },
        },
        // ...
      ]
    }
  }
}
```

## The big picture of how React Components work
1. React developers create either function-based or class-based *React Components*, that return JSX.
2. Babel transpiles JSX to `React.createElement()` or [`jsx()`](https://dev.to/fromaline/jsx-without-importing-react-28dj) at build-time.
3. React creates necessary *React Components Instances* at run-time, and they return *React Elements*.
4. `ReactDOM` renders the virtual DOM, that consists of *React Elements*.

---

P.S. That's all for today! [Follow me on Twitter](https://twitter.com/fromaline) for future content!

{% twitter 1486411651175915527 %}