How React components work?

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.

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.

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.

// 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() 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 for future content!