React Fiber

ReactFiber
@sabativi - HTGrenoble Mai 2017 - www.reactivic.com

VictorSabatier
Freelance Web and mobile
developper.
Build stuﬀ using Meteor, React
and React native.
Love learning and sharing
victor@reactivic.com

React Fiber is an ongoing reimplementation of
React’s core algorithm. It is the culmination of
over two years of research by the React team.
-- React Team

PrologueforReactFiber

PrologueforReactFiber
WhyReact?1
1
Learn more

React was invented as an
alternative to manual DOM
manipulation.

· Virtual DOM.
· Updating.
· And Reconciliation

ThevirtualDOM2
It is an object-based representation of how the DOM should look like
{
type: 'button', //The main element, an html button
props: { //The properties the element has
className: 'button-red', //Keyword 'class' is reserved
children: { //Nested HTML (or React) elements
type: 'span', //The nested element, a span
props: {
children: 'I am just text, so I don't have a type'
}
}
}
}
2
try to answer theses questions : who do we render in our application ? And where do you render it ?

Updating

Reconciliation3
3
try to answer theses questions : how (in what way) and why (under which circumstances) we render our application.

Reconciliationisnot
rendering!

andthisisawesome!
React Native, React VR...

Sofarweknow

· Who to render
· Where to render
· How to render
· Why it render

Whentorender?

Assoonaspossible

Oups

EnterReactFiber.
· Can pause/resume updates.
· Can prioritize updates.
· Can re-use previous updates.
· Can cancel updates.

Benefits
· Chunk updates.
· Smoother animations ( React Native )
· Less work for us.

Thanks
Q&A

Thispresentationwasbasedon
· isfiberreadyyet
· orlandohamsho.com
· react-fiber-architecture
· cartoon intro

React Fiber

More Related Content

What's hot (20)

Similar to React Fiber (20)

Recently uploaded (20)

React Fiber