react-reconciler

Learn to write a host config with react-reconciler.

react-reconciler

The react-reconciler package exports React's core logic. Calling Reconciler(hostConfig) returns a reconciler instance.

This instance provides createContainer and updateContainer methods. createContainer creates a root; updateContainer updates the component tree.

react-dom uses the same API; the only difference is the host config. This ensures consistency.

createContainer and updateContainer

createContainer creates a root fiber and attaches it to a container object. With updateContainer(element, container, ...) you send the new component tree to the root.

On the first call the whole tree is rendered; on later calls only the differences are applied. This is React's efficient update mechanism.

The container is the root node of the target environment; in the DOM a div, in a terminal a root object.

Exercise Write the reconciler setup

Write the reconciler setup. Import Reconciler. Import hostConfig. Create the reconciler with const reconciler = Reconciler(hostConfig) and export it.

Show example solution

import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';

const reconciler = Reconciler(hostConfig);
export default reconciler;

Test yourself

Fill in the blank: create a reconciler

import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';

const ____ = Reconciler(hostConfig);

Show answer

import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';

const reconciler = Reconciler(hostConfig);

What does updateContainer do?
- Creates a root
- Prints the host config
- Updates the component tree
- Generates TypeScript types
Show answer

Updates the component tree — updateContainer sends the new tree to the root.
Match react-reconciler concepts

Reconciler

Creates instance
createContainer

Root fiber
updateContainer

Updates tree
hostConfig

Target functions

Next lesson: Host config

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies