react-reconciler
- React course
- Expert
- Lesson 22/32
- 4 min
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.
Practice Write the reconciler setup
Write the reconciler setup. Import Reconciler. Import hostConfig. Create the reconciler with const reconciler = Reconciler(hostConfig) and export it.
Starter code
// Write the reconciler setup hereSample solution
import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';
const reconciler = Reconciler(hostConfig);
export default reconciler;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Fill in the blank: create a reconciler
import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';
const ____ = Reconciler(hostConfig);import Reconciler from 'react-reconciler';
import hostConfig from './hostConfig';
const reconciler = Reconciler(hostConfig);Explanation: Reconciler(hostConfig) creates a reconciler.
2 What does updateContainer do?
- Creates a root
- Prints the host config
- Updates the component tree Correct answer
- Generates TypeScript types
Explanation: updateContainer sends the new tree to the root.
3 Match react-reconciler concepts
| Term | Meaning |
|---|---|
Reconciler |
Creates instance |
createContainer |
Root fiber |
updateContainer |
Updates tree |
hostConfig |
Target functions |