<commit_before># render(element, vnodes)

- [API](#api)
- [How it works](#how it works)
- [Differences from other API methods](#differences-from-other-api-methods)
- [Standalone usage](#standalone-usage)

---

### API

`m.render(element, vnodes)`

Argument    | Type                 | Required | Description
----------- | -------------------- | -------- | ---
`element`   | `Element`            | Yes      | A DOM element that will be the parent node to the subtree
`vnodes`    | `Array<Vnode>|Vnode` | Yes      | The [vnodes](vnodes.md) to be rendered
**returns** |                      |          | Returns `undefined`

[How to read signatures](signatures.md)

---

### How it works

The `m.render(element, vnodes)` method takes a virtual DOM tree (typically generated via the [`m()` hyperscript function](hyperscript.md), generates a DOM tree and mounts it on `element`. If `element` already has a DOM tree mounted via a previous `m.render()` call, `vnodes` is diffed against the previous `vnodes` tree and the existing DOM tree is modified only where needed to reflect the changes. Unchanged DOM nodes are not touched at all.<commit_msg>add note about synchronicity<commit_after># render(element, vnodes)

- [API](#api)
- [How it works](#how-it-works)
- [Why Virtual DOM](#why-virtual-dom)
- [Differences from other API methods](#differences-from-other-api-methods)
- [Standalone usage](#standalone-usage)

---

### API

`m.render(element, vnodes)`

Argument    | Type                 | Required | Description
----------- | -------------------- | -------- | ---
`element`   | `Element`            | Yes      | A DOM element that will be the parent node to the subtree
`vnodes`    | `Array<Vnode>|Vnode` | Yes      | The [vnodes](vnodes.md) to be rendered
**returns** |                      |          | Returns `undefined`

[How to read signatures](signatures.md)

---

### How it works

The `m.render(element, vnodes)` method takes a virtual DOM tree (typically generated via the [`m()` hyperscript function](hyperscript.md), generates a DOM tree and mounts it on `element`. If `element` already has a DOM tree mounted via a previous `m.render()` call, `vnodes` is diffed against the previous `vnodes` tree and the existing DOM tree is modified only where needed to reflect the changes. Unchanged DOM nodes are not touched at all. 

`m.render` is synchronous.

---

### Why Virtual DOM
{'fraction_non_alphanumeric': 0.15230125523012553, 'fraction_numerical': 0.0, 'mean_word_length': 2.8073248407643314, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4067164', 'n_tokens_mistral': 697, 'n_tokens_neox': 665, 'n_words': 257}