Unit of works of Fiber

[koba04]

    function Bar() {
      return <div><p>Hello World</p></div>;
    }

    function Foo() {
      return [<Bar isBar={true} />, <Bar isBar={true} />];
    }

    ReactNoop.render(<Foo />);

[koba04]

• case1

    ReactNoop.flushDeferredPri(7);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
       FIBERS:
       - [root] [4*]
         IN PROGRESS: 4
         - Foo [4*]

[koba04]

• case2

    ReactNoop.flushDeferredPri(12);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
       FIBERS:
       - [root] [4*]
         IN PROGRESS: 4
         - Foo [4*]
           - Bar [4*]
           - Bar [4*]

[koba04]

• case3

    ReactNoop.flushDeferredPri(17);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
       FIBERS:
       - [root] [4*]
         IN PROGRESS: 4
         - Foo [4*]
           - Bar [4*]
             - div [4*]
           - Bar [4*]

[koba04]

• case4

    ReactNoop.flushDeferredPri(22);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
       FIBERS:
       - [root] [4*]
         IN PROGRESS: 4
         - Foo [4*]
           - Bar [4*]
             - div [4*]
               - p [4*]
           - Bar [4*]

[koba04]

• case5

    ReactNoop.flushDeferredPri(27);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
       FIBERS:
       - [root] [4*]
         IN PROGRESS: 4
         - Foo [4*]
           - Bar [0]
             - div [0]
               - p [0]
           - Bar [4*]

[koba04]

• case6

    ReactNoop.flushDeferredPri(32);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
       FIBERS:
       - [root] [4*]
         IN PROGRESS: 4
         - Foo [4*]
           - Bar [0]
             - div [0]
               - p [0]
           - Bar [4*]
             - div [4*]

[koba04]

• case7

    ReactNoop.flushDeferredPri(37);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
       FIBERS:
       - [root] [4*]
         IN PROGRESS: 4
         - Foo [4*]
           - Bar [0]
             - div [0]
               - p [0]
           - Bar [4*]
             - div [4*]
               - p [4*]

[koba04]

• case8

    ReactNoop.flushDeferredPri(42);
    ReactNoop.dumpTree();

      HOST INSTANCES:
       - [root#0]
         - div#1
           - p#0
         - div#3
           - p#2
       FIBERS:
       - [root] [0]
         - Foo [0]
           - Bar [0]
             - div [0]
               - p [0]
           - Bar [0]
             - div [0]
               - p [0]

[koba04]

ReactNoop.flushDeferredPri is

  flushDeferredPri(timeout : number = Infinity) {
    var cb = scheduledDeferredCallback;
    if (cb === null) {
      return;
    }
    scheduledDeferredCallback = null;
    var timeRemaining = timeout;
    cb({
      timeRemaining() {
        // Simulate a fix amount of time progressing between each call.
        timeRemaining -= 5;
        if (timeRemaining < 0) {
          timeRemaining = 0;
        }
        return timeRemaining;
      },
    });
  },

timeRemaining is simulating requestIdleCallback. if timeRemaining returns 2 and over, ReactFiber processes the next unit of work (Fiber), if not, ReactFiber processes it as a deferred work.