{"id":13671527,"url":"https://github.com/koba04/react-fiber-resources","last_synced_at":"2025-04-04T15:09:01.245Z","repository":{"id":50254928,"uuid":"70822678","full_name":"koba04/react-fiber-resources","owner":"koba04","description":"Resources for React Fiber","archived":false,"fork":false,"pushed_at":"2021-02-11T10:35:08.000Z","size":2656,"stargazers_count":786,"open_issues_count":0,"forks_count":44,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-03-28T14:07:55.652Z","etag":null,"topics":["react","react-fiber"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koba04.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-13T15:48:16.000Z","updated_at":"2025-03-13T08:52:53.000Z","dependencies_parsed_at":"2022-08-12T21:01:10.095Z","dependency_job_id":null,"html_url":"https://github.com/koba04/react-fiber-resources","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koba04%2Freact-fiber-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koba04%2Freact-fiber-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koba04%2Freact-fiber-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koba04%2Freact-fiber-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koba04","download_url":"https://codeload.github.com/koba04/react-fiber-resources/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198461,"owners_count":20900080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-fiber"],"created_at":"2024-08-02T09:01:11.995Z","updated_at":"2025-04-04T15:09:01.227Z","avatar_url":"https://github.com/koba04.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Fiber resources [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)\n\nThis is a repository for resources about React Fiber.\n\nReact Fiber is a new React reconciliation algorithm, which started using from v16. React Fiber makes many features like Suspense and Concurrent Mode possible.\n\nConcurrent Mode is still in experimental stage, but React already has the documentation so you can see what Concurrent Mode makes possible at the documentation.\n\nhttps://reactjs.org/docs/concurrent-mode-intro.html\n\n## React internal algorithm\n\nIf you are not familiar with React internals, I recommend you reading the documentations first, which are very helpful resources.\n\n* [Codebase Overview](https://reactjs.org/docs/codebase-overview.html)\n* [Implementation Notes](https://reactjs.org/docs/implementation-notes.html)\n\n## React Fiber\n\n* [ReactFiber](https://github.com/facebook/react/tree/master/packages/react-reconciler/src)\n* [ReactFiberDOM](https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOM.js)\n* [Fiber Debugger](http://fiber-debugger.surge.sh/)\n\n## Articles \u0026 Slides\n\n* [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture)\n* [Fiber Principles: Contributing To Fiber #7942](https://github.com/facebook/react/issues/7942)\n* [How React Fiber Works](https://www.facebook.com/groups/2003630259862046/permalink/2054053404819731/)\n* [React Internals](https://zackargyle.github.io/react-internals-slides/)\n* [Capability of React Fiber](https://speakerdeck.com/koba04/capability-of-react-fiber)\n* [A look inside React Fiber - how work will get done](http://makersden.io/blog/look-inside-fiber/)\n* [Build your own React Fiber](https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec)\n* [Algorithms in React](https://speakerdeck.com/koba04/algorithms-in-react)\n* [Implementation notes on react's scheduling model as of (shortly before) 16.8.0](https://gist.github.com/Jessidhia/49d0915b7e722dc5b49ab9779b5906e8)\n\n## Videos\n\n* [Dan Abramov: Beyond React 16](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html)\n* [Andrew Clark: Roadmap for React Fiber and Beyond](https://www.youtube.com/watch?v=QW5TE4vrklU)\n* [The Evolution of React and GraphQL at Facebook and Beyond](https://developers.facebook.com/videos/f8-2017/the-evolution-of-react-and-graphql-at-facebook-and-beyond/)\n* [Lin Clark - A Cartoon Intro to Fiber - React Conf 2017](https://www.youtube.com/watch?v=ZCuYPiUIONs)\n* [Sebastian Markbåge - React Performance End to End (React Fiber)](https://www.youtube.com/watch?v=bvFpe5j9-zQ)\n* [Andrew Clark: What's Next for React — ReactNext 2016](https://www.youtube.com/watch?v=aV1271hd9ew)\n* [Why, What, and How of React Fiber with Dan Abramov and Andrew Clark](https://www.youtube.com/watch?v=crM1iRVGpGQ)\n* [A tiny Fiber renderer](https://www.youtube.com/watch?v=U9zFfIww3Go)\n\n## React Fiber function call stacks\n\n**[Note]** React Fiber now behaves as synchronous by default. See [#8127](https://github.com/facebook/react/pull/8127).\nThis call stacks are results in the time when it behaved as asynchronous.\n\n### ReactDOMFiber\n\n![React Fiber function call stack](./images/ReactDOMFiber.png)\n\n### ReactDOM\n\n![ReactDOM function call stack](./images/ReactDOM.png)\n\n### ReactDOMFiber with 10000 items (Async Scheduling)\n\n![React Fiber function call stack with 10000 items (async)](./images/ReactDOMFiber-10000-items-async.png)\n\n```\n--- working asynchronously ---------------------------------------------------------------------------\n| ------- Fiber ---------------    ------- Fiber ---------------    ------ Fiber ---------------     |\n| | beginWork -\u003e completeWork | -\u003e | beginWork -\u003e completeWork | -\u003e |beginWork -\u003e completeWork | ... |\n| -----------------------------   ------------------------------    ----------------------------     |\n------------------------------------------------------------------------------------------------------\n                      ↓↓↓\n-----------------------------------------------------------------------\n| commitAllWork(flush side effects computed in the above to the host) |\n-----------------------------------------------------------------------\n```\n\n### ReactDOMFiber with 10000 items (Sync Scheduling)\n\n![React Fiber function call stack with 10000 items (sync)](./images/ReactDOMFiber-10000-items-sync.png)\n\n### ReactDOM with 10000 items\n\n![ReactDOMFiber function call stack with 10000 items](./images/ReactDOM-10000-items.png)\n\n## React Fiber call tree\n\n![ReactDOMFiber call tree](./images/ReactDOMFiber-call-tree.png)\n\n## Related Words\n\n* [Fiber](https://en.wikipedia.org/wiki/Fiber_(computer_science))\n* [Call Stack](https://en.wikipedia.org/wiki/Call_stack)\n* [Coroutine](https://en.wikipedia.org/wiki/Coroutine)\n* [Continuation](https://en.wikipedia.org/wiki/Continuation)\n* Algebraic Effects\n  * [One-shot Delimited Continuations with Effect Handlers](https://esdiscuss.org/topic/one-shot-delimited-continuations-with-effect-handlers)\n  * [Effective Concurrency with Algebraic Effects](http://kcsrk.info/ocaml/multicore/2015/05/20/effects-multicore/)\n  * [Concurrent \u0026 Multicore OCaml: A deep dive](http://kcsrk.info/slides/multicore_fb16.pdf)\n\n## Custom Renderer Interface\n\nReact 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.\n\nI've presented about the custom renderer; here is the link to the slide.\n\n* https://speakerdeck.com/koba04/make-it-declarative-with-react\n* https://github.com/koba04/jsconf-jp-presentation\n\nThe following is a custom renderer named `react-fs`, which is a renderer for `fs` package\n\n```js\nconst React = require('react');\nconst { ReactFS } = require('@koba04/react-fs');\n\nconst targetDir = \"test-react-fs-project\";\nReactFS.render(\n  \u003c\u003e\n    \u003cfile name=\"README.md\"\u003e\n      # Title\n    \u003c/file\u003e\n    \u003cdirectory name=\"src\"\u003e\n      \u003cfile name=\"index.js\"\u003e\n        console.log(\"Hello\");\n      \u003c/file\u003e\n    \u003c/directory\u003e\n  \u003c/\u003e,\n  targetDir\n);\n```\n\n## ReactNoop\n\nReactNoop is a renderer for React Fiber, which is using for testing and debugging.\nIt is very useful to understand React Fiber renderer!! :eyes:\n\n* https://github.com/facebook/react/tree/master/packages/react-noop-renderer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoba04%2Freact-fiber-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoba04%2Freact-fiber-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoba04%2Freact-fiber-resources/lists"}