Skip to content

CONCEPT Cited by 1 source

React custom reconciler

Definition

A React custom reconciler reuses React's component model, element tree, and reconciliation (diffing + commit) algorithm while replacing the host tree — the actual output surface React commits to — with a non-DOM target. The React ecosystem exposes react-reconciler as the extension point that lets you write a renderer for your output format (terminal, PDF, 3D canvas, native-app JSON, etc.) and still benefit from the component programming model.

Examples in the wild include React DOM (the default, HTML), React Native (iOS/Android native views), Ink (terminal UIs), React Three Fiber (WebGL scenes), React PDF.

Zalando's use of it

At Zalando, the Rendering Engine exposes a single Renderer programming model (write a React component per Entity type) but needs to output to two surfaces: HTML for the Web and app-compatible JSON for the native iOS/Android apps (Source: sources/2021-09-08-zalando-micro-frontends-from-fragments-to-renderers-part-2).

Zalando's solution:

  • Default React renderer → HTML for Web.
  • Custom reconciler that consumes the same React element tree (standard React components, standard JSX) but commits to a tree of custom, non-Web React elements that the reconciler serialises to app-compatible JSON for the client to render natively.

The post's phrasing:

"we added a custom React reconciler that consumed custom React elements, and output app-compatible JSON instead of HTML."

The architectural payoff is that web developers can contribute Native Apps features by reusing the same set of APIs — same Entity model, same GraphQL queries, same platform features (monitoring, A/B testing, persisted queries), same developer tooling. See patterns/same-react-code-web-and-native-via-reconciler.

Why it is powerful

The reconciler is the hardest part of a UI framework — the commit scheduler, the diffing algorithm, the lifecycle ordering. React's reconciler is battle-tested over many years and ecosystems. Writing a host tree adapter is a comparatively small amount of code: you implement a fixed set of methods (createInstance, appendChild, commitUpdate, etc.) that describe what your target does when React asks to build or mutate its tree. Everything above the host tree — hooks, context, suspense, concurrent features — is inherited for free.

This makes the custom reconciler one of the highest-leverage points of extension in modern UI frameworks: it lets you redirect React's entire component system to a new output medium without reinventing the language above it.

Contrast with React Native

React Native's reconciler targets a proprietary native view tree through a JS bridge; Zalando's reconciler targets a serialised JSON description that the apps then interpret locally. The difference is that Zalando's apps consume the JSON at runtime over the network — the rendering is server-authoritative. React Native's rendering is client-authoritative and drives native view APIs directly. Both are valid; which one fits depends on whether you want server-driven content updates (Zalando's bet) or maximum native-framework integration.

Known gaps (Zalando disclosure)

  • The JSON format the reconciler emits is not published.
  • The app-side consumer (iOS / Android SDKs that interpret the JSON) is not described.
  • Versioning / schema-evolution strategy for the JSON contract is not discussed.
  • Gap handling for React features (Suspense, Concurrent Mode) at the time of the Part 2 post is not addressed (though a 2023 follow-up on React 18 Concurrent is teased).

Seen in

Last updated · 476 distilled / 1,218 read