4

Here on this link (as a lotta people referring to, for understanding React 16's architecture) it is mentioned: enter image description here

Even Elements in React are plain JS objects that contains info about the component, having the following four props:

{
  type,
  ref,
  props,
  key
}

I just now want to know a clear difference between Component, Element, Instance and this new Fiber object. Also, is this new Fiber object just the same old Element object with some more new properties as mentioned in the picture?

UtkarshPramodGupta
  • 7,486
  • 7
  • 30
  • 54
  • curious as to why you want to know about Fiber? Generally you won't need it to develop webapps. If you provide this context, I think you might get better answers. – dubes Jul 24 '18 at 14:03
  • Also, I find that Official documentation (especially for React) is a good place to look for these kinds of things. For e.x. [Component vs Element vs Instance](https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html) & [What is React Fiber](https://reactjs.org/docs/faq-internals.html#what-is-react-fiber) which leads to the github post – dubes Jul 24 '18 at 14:04
  • @dubes You don't really get to leverage the power of a language or a framework until and unless you know all the ins and outs of it. I guess you hate the most beautiful programming language of the 20th century, The JavaScript, because of the same reason. ;-) – UtkarshPramodGupta Jul 24 '18 at 14:59
  • Ummm... No. I love JavaScript & react. But I'm sceptical of people basing their solutions on the 'internals' of a framework rather than the exposed apis. React community is facing that problem now. – dubes Jul 24 '18 at 15:09
  • Well..in that case, you might need to update your StackOverflow's profile description. :) – UtkarshPramodGupta Jul 24 '18 at 15:35
  • Dang... I think I wrote that before backbone was a thing! Time to update it I guess! – dubes Jul 24 '18 at 17:26
  • @UtkarshPramodGupta Were you able to figure out an actual answer to this question ? – Atul Oct 14 '18 at 19:39

2 Answers2

2

A fiber is a JavaScript object that contains information about a component, its input and output. It has a one to one relationship with the instance. It manages the work for the instance. The fiber keeps track of the instance using the property stateNode. And it also has information about its relationship with other instances.

From the source code here: https://github.com/facebook/react/blob/9ea4bc6ed607b0bbd2cff7bbdd4608db99490a5f/packages/react-reconciler/src/ReactFiber.js#L406 

export function createFiberFromElement(
  element: ReactElement,
  mode: TypeOfMode,
  expirationTime: ExpirationTime,
): Fiber {
  let owner = null;
  if (__DEV__) {
    owner = element._owner;
  }

  let fiber;
  const type = element.type;
  const key = element.key;
  const pendingProps = element.props;

  let fiberTag;
  if (typeof type === 'function') {
  ....
  ....
  ....

I could understand that React Fiber reconciler uses the react element to generate a fiber node for the component instance. So you can think of it as a react element with time management super powers.

Atul
  • 2,170
  • 23
  • 24
0

The difference is not about the properties of the structures but about what they represent.

A React Element is a object that describes what you want to see on the screen. Basically what comes out the render method.

A React fiber (lower case) is a data structure that represents a unit-of-work.

The great advantage of React Fiber (upper case) is the scheduling. React now can pauses, to allow other things to happen and, resume back to where it left. For this React needs to know where it left and what needs to be done next. And that is what a fiber allows (between other things).

Johnny Zabala
  • 2,285
  • 1
  • 12
  • 14