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

react_fiber.md

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.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

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.

• 'old' React stack vs Fiber / notes
• new return types with Fiber

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

• portals / example
• deferredUpdates

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?

• the 'official' example
• or the modularized / ES2015 version
• infinite scrolling pattern by @threepointone

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)

• The React team's Facebook is using Fiber by default. / source
• http://isfiberreadyyet.com/ is using Fiber / source / code

thanks @threepointone for the build steps

Cool.

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

@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

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

@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 😃

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.

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

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. :-)

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

+1 on that

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

Care to explain, please ?

@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

@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.

Excited on this one!

"Official example" link is broken

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.

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

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.

@ReeganExE

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

Fiber is now in beta, and is ready.

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

Nice.

Is React Fiber now being referred to as Concurrent Mode?

No, fiber and concurrent mode are 2 different things, Fiber was a reworking of the React internals and was released with React 16

Ah, got it, thanks. Appreciate the followup :) Would be cool if we could 👍 on people's comments in Gist, too!