0
# DOM Rendering and Operations
1

2
ReactDOM-compatible rendering functions for mounting, updating, and managing components in the browser DOM.
3

4
## Capabilities
5

6
### render Function
7

8
Renders React components to the DOM with full ReactDOM compatibility.
9

10
```typescript { .api }
11
/**
12
 * Renders a React component tree to a DOM container
13
 * @param rootInput - Component or element to render
14
 * @param container - DOM element to render into
15
 * @param cb - Optional callback after render completes
16
 * @param context - Optional context object for component tree
17
 * @returns Component instance if rendering a class component, undefined otherwise
18
 */
19
function render(
20
  rootInput: InfernoNode,
21
  container: Element | SVGAElement | DocumentFragment,
22
  cb?: () => void,
23
  context?: any
24
): Component | undefined;
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
import { render, createElement, Component } from "inferno-compat";
31

32
// Render a simple element
33
render(
34
  createElement('h1', null, 'Hello World!'),
35
  document.getElementById('app')
36
);
37

38
// Render a component with callback
39
class App extends Component {
40
  render() {
41
    return createElement('div', { className: 'app' }, 
42
      createElement('h1', null, 'My App'),
43
      createElement('p', null, 'Welcome to the application')
44
    );
45
  }
46
}
47

48
const appInstance = render(
49
  createElement(App),
50
  document.getElementById('root'),
51
  () => console.log('App rendered successfully')
52
);
53

54
// Render with JSX (requires transpilation)
55
render(<App />, document.getElementById('root'));
56

57
// Re-render with new props (updates existing DOM)
58
render(
59
  createElement(App, { theme: 'dark' }),
60
  document.getElementById('root')
61
);
62
```
63

64
### hydrate Function
65

66
Hydrates server-rendered HTML with React components for server-side rendering compatibility.
67

68
```typescript { .api }
69
/**
70
 * Hydrates server-rendered markup with React components
71
 * @param rootInput - Component or element to hydrate
72
 * @param container - DOM element containing server-rendered content
73
 * @param cb - Optional callback after hydration completes
74
 * @returns Component instance if hydrating a class component, undefined otherwise
75
 */
76
function hydrate(
77
  rootInput: InfernoNode,
78
  container: Element | SVGAElement | DocumentFragment,
79
  cb?: () => void
80
): Component | undefined;
81
```
82

83
**Usage Examples:**
84

85
```typescript
86
import { hydrate, createElement } from "inferno-compat";
87

88
// Hydrate server-rendered content
89
function App({ initialData }) {
90
  return createElement('div', { className: 'app' },
91
    createElement('h1', null, 'My App'),
92
    createElement('div', null, initialData.message)
93
  );
94
}
95

96
// Hydrate existing server-rendered HTML
97
hydrate(
98
  createElement(App, { initialData: window.__INITIAL_DATA__ }),
99
  document.getElementById('app'),
100
  () => console.log('Hydration complete')
101
);
102

103
// Hydration preserves server-rendered DOM structure
104
// and attaches event listeners without re-creating elements
105
```
106

107
### unmountComponentAtNode Function
108

109
Unmounts and cleans up a React component from the DOM.
110

111
```typescript { .api }
112
/**
113
 * Unmounts a React component tree from a DOM container
114
 * @param container - DOM element containing the component to unmount
115
 * @returns true if a component was unmounted, false if no component found
116
 */
117
function unmountComponentAtNode(
118
  container: Element | SVGAElement | DocumentFragment
119
): boolean;
120
```
121

122
**Usage Examples:**
123

124
```typescript
125
import { render, unmountComponentAtNode, createElement } from "inferno-compat";
126

127
const container = document.getElementById('app');
128

129
// Render a component
130
render(createElement('div', null, 'Hello'), container);
131

132
// Later, unmount the component
133
const wasUnmounted = unmountComponentAtNode(container);
134
console.log(wasUnmounted); // true
135

136
// Container is now empty and component cleanup has occurred
137
console.log(container.innerHTML); // ''
138

139
// Attempting to unmount again returns false
140
const wasUnmountedAgain = unmountComponentAtNode(container);
141
console.log(wasUnmountedAgain); // false
142
```
143

144
### findDOMNode Function
145

146
Finds the DOM element associated with a React component instance.
147

148
```typescript { .api }
149
/**
150
 * Finds the DOM node associated with a component instance
151
 * @param component - Component instance or DOM element
152
 * @returns DOM element associated with the component, or null if not found
153
 */
154
function findDOMNode(component: Component | Element | null): Element | null;
155
```
156

157
**Usage Examples:**
158

159
```typescript
160
import { render, findDOMNode, createElement, Component } from "inferno-compat";
161

162
class MyComponent extends Component {
163
  componentDidMount() {
164
    // Find DOM node for this component
165
    const domNode = findDOMNode(this);
166
    if (domNode) {
167
      domNode.style.backgroundColor = 'lightblue';
168
      domNode.focus();
169
    }
170
  }
171
  
172
  render() {
173
    return createElement('input', { 
174
      type: 'text',
175
      placeholder: 'Enter text here'
176
    });
177
  }
178
}
179

180
// Render and get component reference
181
const componentInstance = render(
182
  createElement(MyComponent),
183
  document.getElementById('app')
184
);
185

186
// Find DOM node from component instance
187
const domElement = findDOMNode(componentInstance);
188
console.log(domElement.tagName); // 'INPUT'
189

190
// Can also pass DOM elements directly
191
const sameElement = findDOMNode(domElement);
192
console.log(sameElement === domElement); // true
193

194
// Returns null for invalid inputs
195
console.log(findDOMNode(null)); // null
196
```
197

198
### unstable_renderSubtreeIntoContainer Function
199

200
Renders a component subtree with parent component context (legacy React API).
201

202
```typescript { .api }
203
/**
204
 * Renders a component subtree with parent component context
205
 * @param parentComponent - Parent component providing context
206
 * @param vNode - Component or element to render
207
 * @param container - DOM element to render into
208
 * @param callback - Optional callback after render completes
209
 * @returns Component instance of the rendered subtree
210
 */
211
function unstable_renderSubtreeIntoContainer(
212
  parentComponent: Component,
213
  vNode: InfernoNode,
214
  container: Element,
215
  callback?: () => void
216
): Component;
217
```
218

219
**Usage Examples:**
220

221
```typescript
222
import { 
223
  unstable_renderSubtreeIntoContainer, 
224
  createElement, 
225
  Component 
226
} from "inferno-compat";
227

228
class Modal extends Component {
229
  render() {
230
    return createElement('div', { className: 'modal' },
231
      createElement('h2', null, 'Modal Title'),
232
      createElement('p', null, this.context.message)
233
    );
234
  }
235
}
236

237
class App extends Component {
238
  getChildContext() {
239
    return { message: 'Hello from parent context' };
240
  }
241
  
242
  openModal = () => {
243
    const modalContainer = document.getElementById('modal-root');
244
    
245
    // Render modal with this component's context
246
    unstable_renderSubtreeIntoContainer(
247
      this,
248
      createElement(Modal),
249
      modalContainer,
250
      () => console.log('Modal rendered with parent context')
251
    );
252
  }
253
  
254
  render() {
255
    return createElement('div', null,
256
      createElement('button', { onClick: this.openModal }, 'Open Modal')
257
    );
258
  }
259
}
260
```
261

262
### DOM Container Requirements
263

264
All rendering functions accept these container types:
265

266
- **Element**: Standard DOM elements (div, span, etc.)
267
- **SVGAElement**: SVG anchor elements for SVG content
268
- **DocumentFragment**: Document fragments for efficient DOM manipulation
269

270
### Rendering Behavior
271

272
#### Initial Render
273
- Creates new DOM elements and component instances
274
- Mounts components and calls lifecycle methods
275
- Attaches event listeners and establishes DOM structure
276

277
#### Re-render (Same Container)
278
- Compares new component tree with existing tree
279
- Updates only changed DOM elements (reconciliation)
280
- Preserves component state and DOM focus where possible
281
- Calls appropriate lifecycle methods (componentDidUpdate, etc.)
282

283
#### Server-Side Rendering Integration
284
- **hydrate**: Preserves server-rendered HTML structure while attaching behavior
285
- **render**: Replaces server-rendered content with client-rendered content
286
- Handles hydration mismatches gracefully
287

288
### Performance Considerations
289

290
- **Batch Updates**: Multiple render calls are automatically batched for performance
291
- **Event Delegation**: Events are delegated at the document level for efficiency
292
- **Memory Management**: Unmounting components cleans up event listeners and references
293
- **Reconciliation**: Efficient diffing algorithm minimizes DOM manipulations