Why does `React.createElement()` create an object?

Question

I'm learning React and I thought that React.createElement(type, [props], [...children]) was just a method that encapsulates the DOM methods.

So, I thought that this React example: React.createElement('h1', {className: 'greeting'}, 'Hello, world!') would execute something like these statements:

const element = document.createElement('h1');
element.setAttribute('class', 'greeting');
document.createTextNode('Hello World');

However, I just read in their documentation that this method returns this object:

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Does anyone have more information about why it creates an object, and how does it communicate with the HTML?

jsejcksn · Accepted Answer · 2021-12-11 17:54:10Z

1

You can read about reconciliation, read the Fiber architecture guide, and view the React DOM source for a very comprehensive understanding.

Essentially, React DOM acts as a mediator to reconcile the state of the DOM with those objects.

answered Dec 11, 2021 at 17:54

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does `React.createElement()` create an object?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related