Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
What is React Fiber? And how can I try it out today?

What is React Fiber? And how can I try it out today?

what?

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.

why?

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

Other key features include the ability to pause, abort, or reuse work as new updates come in; the ability to assign priority to different types of updates; and new concurrency primitives.

some hints on what we could get as new features (mostly marked with unstable_... for now)

how can I try it out today?

  1. git clone https://github.com/facebook/react
  2. gulp react:extract-errors (i've added an npm script to avoid installing gulp globally)
  3. npm run build
  4. use react.js / react-dom-fiber.js in the /build folder

examples?

status?

Fiber isn't completely ready yet http://isfiberreadyyet.com/.
Scheduled for release in 16.0.0 / 17.0.0 ? (see Dan's comment below)

thanks @threepointone for the build steps

@webeli

This comment has been minimized.

Show comment
Hide comment

webeli commented Dec 18, 2016

Cool.

@grzesiekgs

This comment has been minimized.

Show comment
Hide comment
@grzesiekgs

grzesiekgs Dec 18, 2016

Does it actually affects 'regular' developer in any way? Are we going to have any new 'super powers' (besides new return types)?

Does it actually affects 'regular' developer in any way? Are we going to have any new 'super powers' (besides new return types)?

@duivvv

This comment has been minimized.

Show comment
Hide comment
@duivvv

duivvv Dec 18, 2016

@grzesiekgs:

from what I've read, the first release is gonna be fully backwards compatible, probably 'super powers' later on :)
https://twitter.com/dan_abramov/status/808620912031449088

Owner

duivvv commented Dec 18, 2016

@grzesiekgs:

from what I've read, the first release is gonna be fully backwards compatible, probably 'super powers' later on :)
https://twitter.com/dan_abramov/status/808620912031449088

@arcanis

This comment has been minimized.

Show comment
Hide comment
@arcanis

arcanis Dec 18, 2016

I remember reading somewhere that custom renderers would be much easier to implement starting with Fiber. Is it still true?

arcanis commented Dec 18, 2016

I remember reading somewhere that custom renderers would be much easier to implement starting with Fiber. Is it still true?

@duivvv

This comment has been minimized.

Show comment
Hide comment
@duivvv

duivvv Dec 18, 2016

@arcanis

read it too (also a @dan_abramov tweet if I'm not mistaken), I'm not working on Fiber to be clear
Just bundling my finds 😃

Owner

duivvv commented Dec 18, 2016

@arcanis

read it too (also a @dan_abramov tweet if I'm not mistaken), I'm not working on Fiber to be clear
Just bundling my finds 😃

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Dec 19, 2016

Yes, making custom renderers is way easier with Fiber.

I wouldn't strictly say it's slated for 16. May have to wait until 17. There is still quite a bit of work to do.

First releases will definitely focus on backward compatibility and not on new features.

gaearon commented Dec 19, 2016

Yes, making custom renderers is way easier with Fiber.

I wouldn't strictly say it's slated for 16. May have to wait until 17. There is still quite a bit of work to do.

First releases will definitely focus on backward compatibility and not on new features.

@jhartma

This comment has been minimized.

Show comment
Hide comment
@jhartma

jhartma Dec 19, 2016

This sounds all really nice. Would you have any data on how incremental rendering affects the rendering performance of typical react apps?

jhartma commented Dec 19, 2016

This sounds all really nice. Would you have any data on how incremental rendering affects the rendering performance of typical react apps?

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Dec 20, 2016

I don't know, there's a lot of real world testing and tuning we have to do before we can say anything for certain. :-)

gaearon commented Dec 20, 2016

I don't know, there's a lot of real world testing and tuning we have to do before we can say anything for certain. :-)

@herlarbs

This comment has been minimized.

Show comment
Hide comment
@herlarbs

herlarbs Dec 30, 2016

Hope It doesn't take the same path Angular 2 took with Angular 1

Hope It doesn't take the same path Angular 2 took with Angular 1

@yokodev

This comment has been minimized.

Show comment
Hide comment
@yokodev

yokodev Jan 2, 2017

Hope It doesn't take the same path Angular 2 took with Angular 1

+1 on that

yokodev commented Jan 2, 2017

Hope It doesn't take the same path Angular 2 took with Angular 1

+1 on that

@rewieer

This comment has been minimized.

Show comment
Hide comment
@rewieer

rewieer Jan 3, 2017

Hope It doesn't take the same path Angular 2 took with Angular 1

Care to explain, please ?

rewieer commented Jan 3, 2017

Hope It doesn't take the same path Angular 2 took with Angular 1

Care to explain, please ?

@rajinder-yadav

This comment has been minimized.

Show comment
Hide comment
@rajinder-yadav

rajinder-yadav Jan 25, 2017

@rewieer A lot of breaking changes, Angular 2 came out with little care for backward compatibility. Reason for it was, they wanted to start off with a clean slate, reduced code base and use new design patterns and experience learned for Ng 1

rajinder-yadav commented Jan 25, 2017

@rewieer A lot of breaking changes, Angular 2 came out with little care for backward compatibility. Reason for it was, they wanted to start off with a clean slate, reduced code base and use new design patterns and experience learned for Ng 1

@kirillrocks

This comment has been minimized.

Show comment
Hide comment
@kirillrocks

kirillrocks Jan 27, 2017

@rewieer A lot of breaking changes, Angular 2 came out with little care for backward compatibility. Reason for it was, they wanted to start off with a clean slate, reduced code base and use new design patterns and experience learned for Ng 1

That's the reason I've moved to react in the first place, and it was one great decision.

@rewieer A lot of breaking changes, Angular 2 came out with little care for backward compatibility. Reason for it was, they wanted to start off with a clean slate, reduced code base and use new design patterns and experience learned for Ng 1

That's the reason I've moved to react in the first place, and it was one great decision.

@renso3x

This comment has been minimized.

Show comment
Hide comment
@renso3x

renso3x Feb 11, 2017

Excited on this one!

renso3x commented Feb 11, 2017

Excited on this one!

@Ahrengot

This comment has been minimized.

Show comment
Hide comment
@Ahrengot

Ahrengot Apr 24, 2017

"Official example" link is broken

"Official example" link is broken

@NetguruGist

This comment has been minimized.

Show comment
Hide comment
@NetguruGist

NetguruGist Apr 26, 2017

There aren’t many articles on this matter, yet this one – Should I be worried about React Fiber? – might be a good starting point on the topic. Read more on what contribution to the system it provides as well as what are the key benefits of React Native contains.

There aren’t many articles on this matter, yet this one – Should I be worried about React Fiber? – might be a good starting point on the topic. Read more on what contribution to the system it provides as well as what are the key benefits of React Native contains.

@cimi

This comment has been minimized.

Show comment
Hide comment
@cimi

cimi May 10, 2017

The instructions in the gist no longer work as since April 2017 react no longer uses gulp to build.

cimi commented May 10, 2017

The instructions in the gist no longer work as since April 2017 react no longer uses gulp to build.

@ReeganExE

This comment has been minimized.

Show comment
Hide comment
@ReeganExE

ReeganExE May 12, 2017

That's the reason I've moved to react in the first place, and it was one great decision.

Most of us seem to have same reason for moving to react
I unsderstand the decision of Angular team, but... I don't want to learn a lot of things to do the same thing.

That's the reason I've moved to react in the first place, and it was one great decision.

Most of us seem to have same reason for moving to react
I unsderstand the decision of Angular team, but... I don't want to learn a lot of things to do the same thing.

@nikolal

This comment has been minimized.

Show comment
Hide comment
@nikolal

nikolal May 25, 2017

@ReeganExE

I would say, at least one third of the NG community. 👍

nikolal commented May 25, 2017

@ReeganExE

I would say, at least one third of the NG community. 👍

@TallOrderDev

This comment has been minimized.

Show comment
Hide comment
@TallOrderDev

TallOrderDev Jul 26, 2017

Fiber is now in beta, and is ready.

Fiber is now in beta, and is ready.

@alexolefirenko

This comment has been minimized.

Show comment
Hide comment
@alexolefirenko

alexolefirenko Jul 27, 2017

Awesome! I have successfully install fiber and test my isomorphic application... all works fine!

Awesome! I have successfully install fiber and test my isomorphic application... all works fine!

@jiovan

This comment has been minimized.

Show comment
Hide comment

jiovan commented Aug 26, 2017

Nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment