6 / 31
What Is "Rendering"?

"Rendering" is the process of React asking your components to describe what they want their section of the UI to look like, now, based on the current combination of props and state.
Rendering Basics
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// This JSX syntax:
return <MyComponent a={42} b="testing">Text here</MyComponent>

// is converted to this call:
return React.createElement(MyComponent, {a: 42, b: "testing"}, "Text Here")

// and that becomes this element object:
{type: MyComponent, props: {a: 42, b: "testing"}, children: ["Text Here"]}

// And internally, React calls the actual function to render it:
let elements = MyComponent({...props, children})

// For "host components" like HTML:
return <button onClick={() => {}}>Click Me</button> 
// becomes
React.createElement("button", {onClick}, "Click Me")
// and finally:
{type: "button", props: {onClick}, children: ["Click me"]}
  • JSX syntax is converted into React.createElement() calls (or the newer equivalent) at compile time
  • This becomes a tree of "element" objects with {type, props, children}
  • React continues calling components to collect the entire new element tree
  • React then diffs the previous element tree vs the current element tree to decide what actual changes are necessary ("reconciliation")