{"id":13559892,"url":"https://github.com/tranbathanhtung/react-fiber-implement","last_synced_at":"2025-04-06T02:09:34.690Z","repository":{"id":40005115,"uuid":"158901201","full_name":"tranbathanhtung/react-fiber-implement","owner":"tranbathanhtung","description":" re-implement react fiber","archived":false,"fork":false,"pushed_at":"2019-01-28T15:22:40.000Z","size":53,"stargazers_count":576,"open_issues_count":0,"forks_count":36,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T01:07:41.356Z","etag":null,"topics":["fiber","react","react-dom","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tranbathanhtung.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-24T04:06:36.000Z","updated_at":"2025-03-20T17:07:34.000Z","dependencies_parsed_at":"2022-06-26T07:31:14.975Z","dependency_job_id":null,"html_url":"https://github.com/tranbathanhtung/react-fiber-implement","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/tranbathanhtung%2Freact-fiber-implement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tranbathanhtung%2Freact-fiber-implement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tranbathanhtung%2Freact-fiber-implement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tranbathanhtung%2Freact-fiber-implement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tranbathanhtung","download_url":"https://codeload.github.com/tranbathanhtung/react-fiber-implement/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423515,"owners_count":20936626,"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":["fiber","react","react-dom","react-fiber"],"created_at":"2024-08-01T13:00:34.867Z","updated_at":"2025-04-06T02:09:34.676Z","avatar_url":"https://github.com/tranbathanhtung.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## React fiber\nreact-fiber is my self-study project help me understand how react work. In fact, all \u001dcodebase re-implement each step , so it looks similar to the source code of react. Though, I think it's still smaller and easier to understand than when you actually read the react source code. I hope it helpful for people who want to start learn how react fiber work.\n\n## Something you should read and learn before start read source code\n\n#### Keyword, Algorithms and Data Structure Used\n- Single linked list, Circular linked list\n- Simple stack and queue\n- Recursive\n- Structural sharing\n- [Reconciliation](https://reactjs.org/docs/reconciliation.html)\n- Scheduler\n- Bitwise Operators\n- JSX\n- DOM\n###### And more\n- [React Components, Elements, and Instances](https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html)\n- [Design Principles](https://reactjs.org/docs/design-principles.html)\n- [React Fiber resources](https://github.com/koba04/react-fiber-resources)\n- [The how and why on React’s usage of linked list in Fiber to walk the component’s tree](https://medium.com/react-in-depth/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-67f1014d0eb7)\n- [In-depth explanation of state and props update in React\n](https://medium.com/react-in-depth/in-depth-explanation-of-state-and-props-update-in-react-51ab94563311)\n###### Recommend\n- [Lin Clark - A Cartoon Intro to Fiber - React Conf 2017\n](https://www.youtube.com/watch?v=ZCuYPiUIONs)\n- [A look inside React Fiber\n](https://makersden.io/blog/look-inside-fiber/)\n- [Build your own React Fiber](https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec)\n- [React Fiber Architecture @acdlite](https://github.com/acdlite/react-fiber-architecture) and [React Fiber Architecture @SaeedMalikx](https://github.com/SaeedMalikx/React-Fiber-Architecture)\n\n\n## Overview\n\n### Fiber tree\n![](https://cdn-images-1.medium.com/max/1600/1*cLqBZRht7RgR9enHet_0fQ.png)\n\n[Inside Fiber: in-depth overview of the new reconciliation algorithm in React](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e)\n### Keyword\n  ```\n  work (unitOfWork): A component, node element =\u003e fiber\n\n  current: Current fiber what is displayed on browser\n\n  WIP (workInProgress): New fiber tree we will build\n\n  fiber: {\n    type: string | Function ('div', 'span', function Button)\n    instanceNode: HTMLElement (div, span)\n    return: fiber (parent of fiber)\n    child: fiber (child of fiber)\n    sibling: fiber (sibling of fiber)\n\n    alternate: link current - WIP and WIP - current\n    effectTag: number (give we know what will happen this fiber)\n\n  }\n\n  requestIdleCallback\n\n  main function:\n    createWorkInProgress()\n    beginWork()\n    reconcileChildren()\n    completeWork()\n    commitWork()\n  ```\n\n### Process of first render\n  ```\n  Render -\u003e Reconciler -\u003e Scheduler -\u003e\n  Begin Work (build fiber tree) -\u003e ChildReconciler(create child and effectTag) -\u003e if work has child we will continue to run beginWork -\u003e no child -\u003e              \n  Complete Work (build list effect, mark tag and create instanceNode) -\u003e sibling has child -\u003e turn back Begin Work -\u003e no child -\u003e Complete Work -\u003e no sibling -\u003e has a new tree with effect tag -\u003e\n  Commit Work : It will base on list effect tag to commit each fiber (Placement, Update, Delete, Lifecycle)\n\n  // In first render current fiber is null.\n  // current is workInProgress when commit\n  ```\n### Process when update\n  ```\n  Do something -\u003e\n  Get current Fiber what corresponding to the component -\u003e\n  Recursive to find Root -\u003e\n  Clone fiber from root to component has update -\u003e\n  Begin Work from this fiber (it's maybe clone fiber when children of component use memo, pure component or use shouldComponentUpdate) -\u003e\n  Complete Work -\u003e\n  Commit Work\n  ```\n\n### About With(Hook v16.7)\n  ```\n  Hooks are stored as a linked list on the fiber's prevState field of fiber.\n  current tree - current hook \u003c=\u003e WIP - WIP hook\n\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftranbathanhtung%2Freact-fiber-implement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftranbathanhtung%2Freact-fiber-implement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftranbathanhtung%2Freact-fiber-implement/lists"}