What is a custom renderer?

Learn that React can render to other targets (terminal, canvas).

What is a custom renderer?

A custom renderer renders React to a non-DOM target. For example a terminal, canvas or mobile native components can be a target.

The react-reconciler package provides React's core logic; you only write a host config. This config contains functions like createInstance and appendChild.

react-dom and react-native use the same reconciler; the difference is the host config.

Host config

The host config is the set of functions the reconciler calls. The most important ones: createInstance (new node), appendChild (add child), removeChild (remove child) and commitUpdate (update props).

These functions are written for the target environment. In the DOM document.createElement is used; in a terminal a node object is created.

With supportsMutation: true mutation mode is on; this allows direct updates.

Exercise Write the hostConfig skeleton

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

Show example solution

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

Test yourself

What does a custom renderer provide?
- Faster compilation
- Rendering outside the DOM
- A smaller bundle
- TypeScript support
Show answer

Rendering outside the DOM — A custom renderer paints to a non-DOM target.

Fill in the blank: enable mutation mode

const hostConfig = {
  ____: true,
  createInstance: (type) => ({ type, children: [] }),
};

Show answer

const hostConfig = {
  supportsMutation: true,
  createInstance: (type) => ({ type, children: [] }),
};

Match host config functions

createInstance

Creates a new node
appendChild

Adds a child
removeChild

Removes a child
commitUpdate

Updates props

Next lesson: react-reconciler

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies