Skip to content

koba04/react-fiber-resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Fiber resources PRs Welcome

This is a repository for resources about React Fiber.

React Fiber is a new React reconciliation algorithm, which started using from v16. React Fiber makes many features like Suspense and Concurrent Mode possible.

Concurrent Mode is still in experimental stage, but React already has the documentation so you can see what Concurrent Mode makes possible at the documentation.

https://reactjs.org/docs/concurrent-mode-intro.html

React internal algorithm

If you are not familiar with React internals, I recommend you reading the documentations first, which are very helpful resources.

React Fiber

Articles & Slides

Videos

React Fiber function call stacks

[Note] React Fiber now behaves as synchronous by default. See #8127. This call stacks are results in the time when it behaved as asynchronous.

ReactDOMFiber

React Fiber function call stack

ReactDOM

ReactDOM function call stack

ReactDOMFiber with 10000 items (Async Scheduling)

React Fiber function call stack with 10000 items (async)

--- working asynchronously ---------------------------------------------------------------------------
| ------- Fiber ---------------    ------- Fiber ---------------    ------ Fiber ---------------     |
| | beginWork -> completeWork | -> | beginWork -> completeWork | -> |beginWork -> completeWork | ... |
| -----------------------------   ------------------------------    ----------------------------     |
------------------------------------------------------------------------------------------------------
                      ↓↓↓
-----------------------------------------------------------------------
| commitAllWork(flush side effects computed in the above to the host) |
-----------------------------------------------------------------------

ReactDOMFiber with 10000 items (Sync Scheduling)

React Fiber function call stack with 10000 items (sync)

ReactDOM with 10000 items

ReactDOMFiber function call stack with 10000 items

React Fiber call tree

ReactDOMFiber call tree

Related Words

Custom Renderer Interface

React doesn't depend on any specific environments like DOM and React provides us a way to create own custom renderers based on Fiber reconciliation. ReactDOM and ReactNative are implemented as one of the custom renderers.

I've presented about the custom renderer; here is the link to the slide.

The following is a custom renderer named react-fs, which is a renderer for fs package

const React = require('react');
const { ReactFS } = require('@koba04/react-fs');

const targetDir = "test-react-fs-project";
ReactFS.render(
  <>
    <file name="README.md">
      # Title
    </file>
    <directory name="src">
      <file name="index.js">
        console.log("Hello");
      </file>
    </directory>
  </>,
  targetDir
);

ReactNoop

ReactNoop is a renderer for React Fiber, which is using for testing and debugging. It is very useful to understand React Fiber renderer!! 👀

About

Resources for React Fiber

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published