React renderers

Live notes on creating a custom renderer in React.

Creating a renderer

To create a React renderer you implement the react-reconciler package:

• https://twitter.com/vadimdemedes/status/1277620575058505728
• https://blog.atulr.com/react-custom-renderer-1/
• https://github.com/doodlewind/react-ssd1306/blob/master/docs/tutorial.md
• https://github.com/nitin42/Making-a-custom-React-renderer

Renderer vs reconciler

Sometimes renderers are incorrectly called reconcilers but reconciliation and rendering are separate things. The reconciler (which is React internal) determines which part of a tree has changed, while renderers use the reconciled tree to render the app. (1, 2, 3)

A few renderers

• react-dom: renders components to the DOM.
• react-native-renderer: renders components to native views.
• ink: renders components to the command-line.
• react-three-fiber: renders three.js in a React environment.

More reading:

• https://github.com/chentsulin/awesome-react-renderer
• https://reactjs.org/docs/codebase-overview.html#renderers

Last update: August 22, 2020

Enjoyed the post?
Celebrate with confetti!

Share this post on Twitter!