<Custom Renderers />

- Renganatha A

<🧠 />

Can you name a few custom renderers in react ?

  • react-dom
  • react-canvas
  • react-native
  • react-hardware
  • redocx
  • react-tv

What is Custom renderers and What's Special About it 🤔 ?

  • Use React  for Everything
  •  Declarative Programming

 

Before That... ✋

Fiber 🤯

What is Fiber ?

 

  • Data Structure
  • Unit of Works
  • New Reconciliation algorithm to find the State Changes

How Fiber Works ?

  • Scheduling the Update
  • Prioritizing the update
  • Cancelling the update
  • Reusing the completed work

Reconciler

  • Virtual-dom
  • Compute changes to render

Renderers

  • Renders UI on screen
  • We can use same reconciler for different renders

How to Create Custom Renderers ?

Step 1

Using hostConfig

Step 2 - Creating Render Func

Step 3 - Creating Comp

Demo 😀

References 😇

Questions 🤫

Thank You 🙏

Made with Slides.com