Lin Clark - A Cartoon Intro to Fiber - React Conf 2017

By: Facebook Developers

1010   32   79219

Uploaded on 03/16/2017

Comments (13):

By acemarke    2017-09-20

For those who are interested in some of the details of the work that's going on, Lin Clark's recent talk on "A Cartoon Intro to Fiber" at ReactConf 2017 is excellent [0]. There's a number of other existing writeups and resources on how Fiber works [1] as well. The roadmap for 15.5 and 16.0 migration is at [2], and the follow-up issue discussing the plan for the "addons" packages is at [3].

I'll also toss out my usual reminder that I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at https://www.reactiflux.com .

[0] https://www.youtube.com/watch?v=ZCuYPiUIONs

[1] https://github.com/markerikson/react-redux-links/blob/master...

[2] https://github.com/facebook/react/issues/8854

[3] https://github.com/facebook/react/issues/9207

Original Thread

By mklarmann    2017-09-20

React Fiber was beautifully described by Lin on the last reactconf. https://www.youtube.com/watch?v=ZCuYPiUIONs Congratulations to the release.

Original Thread

By acemarke    2017-09-20

I'll repeat the comment I made in the "React 15.5" thread a couple weeks ago (https://news.ycombinator.com/item?id=14063818):

For those who are interested in some of the details of the work that's going on, Lin Clark's recent talk on "A Cartoon Intro to Fiber" at ReactConf 2017 is excellent [0]. There's a number of other existing writeups and resources on how Fiber works [1] as well. The roadmap for 15.5 and 16.0 migration is at [2], and the follow-up issue discussing the plan for the "addons" packages is at [3].

I'll also toss out my usual reminder that I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at https://www.reactiflux.com .

[0] https://www.youtube.com/watch?v=ZCuYPiUIONs

[1] https://github.com/markerikson/react-redux-links/blob/master...

[2] https://github.com/facebook/react/issues/8854

[3] https://github.com/facebook/react/issues/9207

Original Thread

By misterbowfinger    2018-04-01

Awesome post!

Related - Lin Clark has an amazing talk on explaining React Fiber:

https://www.youtube.com/watch?v=ZCuYPiUIONs

Original Thread

By anonymous    2017-09-20

If you're wanting long, highly detailed, in-depth explanations then this isn't what this site is really for

Since react is going to redesign their entire internal structure of updating react components inside the dom. They've uploaded a video regarding the changes with a deep explanation of what is going on. I highly recommend to watch this video to get an overall view on this algorithm.

(React Fiber announcement - React Conference 2017)

https://www.youtube.com/watch?v=ZCuYPiUIONs

Original Thread

By anonymous    2017-09-20

It probably would be good to read about Reconciliation in React and also there's a good video about how React renders in Fiber which helps visualize what React is thinking about when it is rerendering.

Parents aren't responsible for each components individual render function -- it just knows to a diff against the virtual DOM and then trigger the lifecycle methods and then a rerender for its own children if necessary. To clarify hooking into life cycle methods can also change the behavior of when a parent or child might render so when you ask How does something not render, it could be because it was specified not to.

For children components, the parents simply repass the props in and trigger the process again but it doesn't necessarily destroy and rebuild the instance (this depends on if there are different types surrounding the children components).

Hope this helps.

Original Thread

By anonymous    2017-09-20

React Fiber is an ongoing reimplementation of React's core algorithm, it’s just a complete internal re-write of React.

React Fiber is a complete, backwards compatible rewrite of the React core.

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.

React Fibre is a virtual stack frame, with React Fibre being a reimplementation of a stack frame specialised for React components. Each fibre can be thought of as a virtual stack frame where information from the frame is preserved in memory on the heap, and because info is saved on the heap, you can control and play with the data structures and process the relevant information as needed.

You can find an excellent explanation from Lin Clark in this video.

For more details please check the following links ,

1.What is React Fiber ?

2.React Fiber Architecture

Hopes this will help you !!

Original Thread

By anonymous    2017-09-23

Maybe React v16 is something you want to look at because they have introduced priority. https://www.youtube.com/watch?v=ZCuYPiUIONs

Original Thread

By anonymous    2017-11-06

React schedules updates in two phases: reconciler phase (or also render phase since it involves the render method for the components we define) and the commit phase. When the state is updated React will initiate the update process no matter what. It is the use of appropriate shouldComponentUpdate that can help you reduce number of updates in the children components

Possible solution: Use a shouldComponentUpdate for ProductRow, that looks like this:

shouldComponentUpdate(nextProps) {
  if (
    this.props.guid !== nextProps.guid
    || // similarly check if the other new props are different
  ) {
    return true;
  }
  return false
}

The above check will make sure when parent detects a setState and schedules an update in the new React Fiber's work loop, not recomputation of the child component is undertaken and commit phase skip any DOM update altogether.

Lin Clark explains the two phases really well. It'll definitely help you understand how React Fiber manages updates.

You could look into React Virtualised to improve perceived perf with extremely long lists.

Original Thread

By anonymous    2018-05-14

React and Angular’s change detection are different, but they have in common one very important thing - Virtual DOM.

In Angular, on high level it works like this:

  1. Change detection is triggered by zone.js at the end of each call stack in the zone. 
It means that after callback to every async action (click, http request, timeout) is executed, change detection is triggered.
 You can trigger change detection also manually, or even „turn off” zone.js, but let’s stick with most common scenario.
  2. Change detection starts from the root component and it goes down through the components tree (again, You can trigger it manually on any component, but that’s not the most common case).
  3. Traversing components tree, it checks which values in component templates need to be updated - here Virtual DOM comes into play.
  4. It updates DOM values based on results from previous point.


NOTE: Mind that if You use ChangeDetectionStrategy.OnPush, some components and its descendants might be omitted during tree traversal. It can be great optimization.

In React it looks like this:

  1. Change detection is not triggered after callbacks of async actions. It’s triggered by calling method setState on component.
  2. Change detection starts not from the root component, but from component in which setState was called.
  3. Reconciliation phase begins - component and it’s descendants are traversed for checking which values needs to be updated in real DOM. So, conceptually, this point is same as it is in Angular (Virtual DOM is also used here). However in React 16 it’s a little bit more complicated. Check it.
  4. Dom is updated.

NOTE: Similar to Angular’s ChangeDetectionStrategy.OnPush, in React we have method shouldComponentUpdate which might be used to prevent component and it’s descendant to tree traversal.

Of course there's lot more differences, but on high level, I think those are the most important.

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.