0
# Core Rendering
1

2
Main rendering functionality for mounting and updating virtual DOM trees to real DOM elements with high-performance reconciliation.
3

4
## Capabilities
5

6
### Render Function
7

8
Renders a virtual node tree into a DOM container element.
9

10
```typescript { .api }
11
/**
12
 * Renders a virtual node tree into a DOM container element
13
 * @param input - VNode or InfernoNode to render
14
 * @param parentDOM - DOM element to render into
15
 * @param callback - Optional callback called after rendering completes
16
 * @param context - Optional context object passed to components
17
 */
18
function render(
19
  input: VNode | InfernoNode,
20
  parentDOM: ParentDOM,
21
  callback?: (() => void) | null,
22
  context?: ContextObject
23
): void;
24
```
25

26
**Usage Examples:**
27

28
```typescript
29
import { render, createVNode } from "inferno";
30

31
// Basic rendering
32
const vnode = createVNode(1, 'div', null, 'Hello World');
33
render(vnode, document.getElementById('app'));
34

35
// With callback
36
render(vnode, document.getElementById('app'), () => {
37
  console.log('Render complete');
38
});
39

40
// With context
41
const context = { theme: 'dark' };
42
render(vnode, document.getElementById('app'), null, context);
43
```
44

45
### Create Renderer
46

47
Creates a reusable renderer function bound to a specific DOM container.
48

49
```typescript { .api }
50
/**
51
 * Creates a reusable renderer function bound to a specific DOM container
52
 * @param parentDOM - Optional DOM element to bind the renderer to
53
 * @returns Renderer function for multiple render calls
54
 */
55
function createRenderer(parentDOM?: ParentDOM): 
56
  (lastInput: any, nextInput: any, callback?: any, context?: any) => void;
57
```
58

59
**Usage Examples:**
60

61
```typescript
62
import { createRenderer, createVNode } from "inferno";
63

64
// Create bound renderer
65
const renderer = createRenderer(document.getElementById('app'));
66

67
// Use renderer multiple times
68
renderer(null, createVNode(1, 'div', null, 'First render'));
69
renderer(lastVNode, createVNode(1, 'div', null, 'Updated content'));
70

71
// Create unbound renderer (container passed as first argument)
72
const unboundRenderer = createRenderer();
73
unboundRenderer(document.getElementById('app'), createVNode(1, 'h1', null, 'Title'));
74
```
75

76
### Render Internal
77

78
Internal rendering implementation used by other inferno packages and advanced use cases.
79

80
```typescript { .api }
81
/**
82
 * Internal rendering implementation used by other inferno packages
83
 * @param input - VNode or InfernoNode to render
84
 * @param parentDOM - DOM element to render into
85
 * @param callback - Optional callback called after rendering completes
86
 * @param context - Context object passed to components
87
 */
88
function renderInternal(
89
  input: VNode | InfernoNode,
90
  parentDOM: ParentDOM,
91
  callback: (() => void) | null,
92
  context: ContextObject
93
): void;
94
```
95

96
## Rendering Process
97

98
The rendering process in Inferno follows these steps:
99

100
1. **Input Validation**: Validates the input VNode and parent DOM element
101
2. **VNode Preparation**: Clones VNodes if they're already in use to prevent conflicts
102
3. **Mounting/Patching**: Either mounts new content or patches existing content
103
4. **Lifecycle Execution**: Calls component lifecycle methods and animation hooks
104
5. **Callback Execution**: Invokes the optional callback after completion
105

106
## Performance Optimizations
107

108
- **VNode Reuse**: Clones VNodes that are already in use to enable safe reuse
109
- **Efficient Patching**: Only updates changed parts of the DOM tree
110
- **Lifecycle Batching**: Batches lifecycle calls for better performance
111
- **Animation Queuing**: Efficiently manages animation lifecycle hooks
112

113
## Error Handling
114

115
Common rendering errors and their causes:
116

117
- **Invalid Parent DOM**: Throws error if parentDOM is null or invalid
118
- **Document Body Rendering**: Development warning when trying to render to document.body
119
- **VNode Validation**: Development-time validation of VNode structure
120

121
## Context Passing
122

123
Context objects are passed down the component tree and available in component constructors and lifecycle methods:
124

125
```typescript
126
// Parent component sets context
127
render(vnode, container, null, { theme: 'dark', locale: 'en' });
128

129
// Child components access context
130
class MyComponent extends Component {
131
  constructor(props, context) {
132
    super(props, context);
133
    console.log(context.theme); // 'dark'
134
  }
135
}
136
```