Building custom renderers with React
React has enabled us to write complex UIs with a great declarative API. Under the hood, React’s reconciler optimizes by diffing the old and new tree, usually known as virtual DOM diffing. The latest version of React uses a Fiber architecture to implement the reconciler. The reconciler backs custom renderers like React DOM and React Native to target various platforms. In this talk we’ll implement a custom renderer with react-reconciler. We’ll also take a brief look at various custom renderers in the wild to have an idea of what can be acheived.
The talk will focus on the following key points
- What is a custom renderer
- Why should you build one
- What is “fiber”
- What is “reconciliation”
- How to build a custom renderer with react-reconciler
- Integration with React devtools
- More resources on Fiber and custom renderers
Satyajit Sahoo is a frontend developer at Callstack, and a core contributor to React Native. He is skilled in building React and React Native apps and has a good understanding of the internals.