javascriptreactjsreact-16react-fiber

What is the difference between a fibre object in React 16 and a React Element?


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?


Solution

  • 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🥇.