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!

Comments

[Nick]

Yep, I agree with you for the most part.

Functional components are much cleaner, and I prefer them over class-based ones. The same goes for other developers I know in person.

But at the same time, there is no official recommendation to avoid class-based components. For example, people with a strong OOP "background" would probably prefer class-based components. Because they at least partially follow the OOP paradigm.

Thanks for adding value to the conversation!

[Viraj Singh]

I've seen many codebases using hooks most of the time and a top level Class component for Error boundary, as there's no official error boundary hook available.

[Nick]

More info on this here!

[alguerocode]

good blog bro

[Nick]

Thanks 🙏🏻
I truly appreciate such feedback!

Also, I have other articles here if you want more content like this.

[Nick]

I get your point, but why are you so against class-based components?
Is it just personal preferences? Or have you had some bad experiences using them?

[Nick]

Yes, it's another proof that we still need both ways of creating components!

[Nick]

Wow, such a cool comment!
I'll check out your articles, thanks!