Host config
- React course
- Expert
- Lesson 23/32
- 4 min
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.
Practice 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.
Starter code
// Write the hostConfig hereSample solution
const hostConfig = {
createInstance: (type, props) => ({ type, props, children: [] }),
appendChild: (parent, child) => {
parent.children.push(child);
return parent;
},
};
export default hostConfig;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match host config functions
| Term | Meaning |
|---|---|
createInstance |
Creates a node |
appendChild |
Adds a child |
removeChild |
Removes a child |
commitUpdate |
Applies props |
2 What should appendChild return?
- child
- null
- undefined
- parent Correct answer
Explanation: appendChild returns parent for chained calls.
3 Fill in the blank: commitUpdate signature
commitUpdate: (instance, type, oldProps, ____) => { /* apply props */ },commitUpdate: (instance, type, oldProps, newProps) => { /* apply props */ },Explanation: commitUpdate takes a newProps parameter.