Host config

Learn the core host config functions.

Host config details

The most commonly used host config functions are createInstance, appendChild, removeChild and commitUpdate.

createInstance(type, props) creates the target node. appendChild(parent, child) adds the child and returns parent. commitUpdate applies prop changes.

These functions are written for the target environment; in the DOM createElement, in a terminal a node object.

commitUpdate and props

commitUpdate(instance, type, oldProps, newProps) updates a node's props. In the DOM this means changing attributes; in a terminal the text or colour is updated.

For performance you apply only the changed props; removing and re-adding all props is inefficient.

appendChild and removeChild also return parent to allow chained calls.

Exercise Write createInstance and appendChild

Write a hostConfig. Add createInstance: (type, props) => ({ type, props, children: [] }) and appendChild: (parent, child) => { parent.children.push(child); return parent; }. Export it.

Show example solution

const hostConfig = {
  createInstance: (type, props) => ({ type, props, children: [] }),
  appendChild: (parent, child) => {
    parent.children.push(child);
    return parent;
  },
};
export default hostConfig;

Test yourself

Match host config functions

createInstance

Creates a node
appendChild

Adds a child
removeChild

Removes a child
commitUpdate

Applies props
What should appendChild return?
- child
- null
- undefined
- parent
Show answer

parent — appendChild returns parent for chained calls.

Fill in the blank: commitUpdate signature

commitUpdate: (instance, type, oldProps, ____) => { /* apply props */ },

Show answer

commitUpdate: (instance, type, oldProps, newProps) => { /* apply props */ },

Next lesson: Summary - Custom renderer

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies