{"id":13681007,"url":"https://github.com/SaeedMalikx/React-Fiber-Architecture","last_synced_at":"2025-04-30T02:33:58.013Z","repository":{"id":40003322,"uuid":"152167685","full_name":"SaeedMalikx/React-Fiber-Architecture","owner":"SaeedMalikx","description":"Understanding the structure of React Fiber( walk through and pseudo-code)","archived":false,"fork":false,"pushed_at":"2018-10-31T00:59:37.000Z","size":114,"stargazers_count":674,"open_issues_count":6,"forks_count":25,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-11-12T00:36:15.953Z","etag":null,"topics":["react","react-dom","reactfiber"],"latest_commit_sha":null,"homepage":"","language":null,"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/SaeedMalikx.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-10-09T01:13:04.000Z","updated_at":"2024-09-15T11:55:35.000Z","dependencies_parsed_at":"2022-07-27T10:18:44.143Z","dependency_job_id":null,"html_url":"https://github.com/SaeedMalikx/React-Fiber-Architecture","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/SaeedMalikx%2FReact-Fiber-Architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedMalikx%2FReact-Fiber-Architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedMalikx%2FReact-Fiber-Architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaeedMalikx%2FReact-Fiber-Architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SaeedMalikx","download_url":"https://codeload.github.com/SaeedMalikx/React-Fiber-Architecture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251629618,"owners_count":21618216,"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-dom","reactfiber"],"created_at":"2024-08-02T13:01:24.920Z","updated_at":"2025-04-30T02:33:57.712Z","avatar_url":"https://github.com/SaeedMalikx.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"\n\nJust another one of my **Self-Study Projects** . I don't tend to make such projects public but this might be of help for someone looking to understand Fiber and React Under the hood. Do remember as of writing this, this is my first time looking at the code for Fiber.\n\nOften times reading a large amount of code can be very intimidating for someone new to programming. So it's best to read each line and document them if needed so you don't go hoping around files searching for that lost variable or get lost on the Import tags. There is no set rules or anything here, just documenting/laying it out the best I can. Any part of this doc might change as my understanding of the whole system grows. \n\nIn order to properly use this, clone it and uncheck all the files and then go through the files one by one and adjust the pseudocode to your liking. Remember it took them 2+ years to make Fiber so be patient as it might take you a while. \n\n**As for obvious errors and such:**\n\n\u003e “There are no mistakes, only happy accidents.” Bob Ross\n\n\n\n**Lot of this comes directly from Fiber codebase itself, a lot of it will be just code reorganized for easier understanding. I Turn a lot of functions into Pseudocode for easier reference and understanding**\n\nHere is the link for the official codebase [REACT](https://github.com/facebook/react/tree/master/packages/react-reconciler)\n\n### Files So Far\n\n\n- [x] ReactFiber.js \u003e Defining Functions For Creating Fibers\n- [x] ReactCurrentFiber.js \u003e Functions for Describing Fibers\n- [ ] ReactDebugFiberPerf \u003e probably for debugging DEV\n- [x] ReactChildFiber \u003e The Bulk of The Child Reconciliation\n- [x] ReactClassComponent.js \u003e Class mounting, class instances, class reconciliation\n- [x] ReactContext.js \u003e Probably context stuff\n- [x] ReactFiberHostContext \u003e Host Stuff\n- [ ] ReactFiberHydrationContext.js \u003e Must Understand the Fast and Furious DOM\n- [x] ReactFiberPendingPriority.js \u003e Priority, marks levels for various stuff\n- [x] ReactFiberRoot.js \u003e For creating Fiber Roots\n- [x] ReactFiberExpirationTime.js \u003e How expiration time is handled\n- [ ] ReactProfilerTimer.js \u003e For Recording/Tracking Time React Profiler\n- [ ] ReactFiberTreeReflection.js \u003e Finding Where the host fibers are...nature \n- [x] ReactFiberStack.js \u003e Concerns how the \"stack\" is shifted\n- [ ] ReactFiberScheduler \u003e THIS IS SOME GUCCI CODE\n- [x] ReactUpdateQueue.js \u003e Scheduling The Updates(or I think so)\n- [x] ReactFiberBeginWork.js \u003e This is for begining the work\n- [x] ReactCompleteWork.js \u003e CompleteWork\n- [x] ReactUnwindWork.js \u003e Unwind\n- [ ] ReactCommitWork.js \u003e Committing Work\n- [x] ReactFiberReconciler.js \u003e  The Main File\n- [ ] REACT-DOM.JS \u003e Where the above files end making sense\n- [ ] Scheduler.js \u003e located in a different package \u003e concerns RequestAnimationFrame\n\n-----------------\n\n### Note on Algorithms Used\n\nI thought there would be many complicated algorithms used since it took 2+ years to build. \nThese Are All the ones I noticed and are quite simple\n\n```\n\nSinglyLinked Lists\nSimple Stacks (push) (pop) are used based on a index/cursor.\nThe algorithms used for reconciling children are equivalent of going through a JSON file. \nSimply mapping it out, maybe run some while loops on the childrens until all are reconciled. \nBuilding a clone  then see what changed and perform replacements.\nNavigating through the stack in reverse or forward direction\n\n```\n\n\n----------------\n\n\n## What Is A Fiber and How Are They Created?\n\n\u003e A Fiber is work on a Component that needs to be done or was done. There can be more than one per component.\n\nIt is essentially an object with set properties used to identify what kind of a (component) it is and what works needs to be done. Assign prioirity levels for efficient processing. since it uses flow, it is also exported as a type. \n\nMost/if not all is in: **ReactFiber.js**\n\n```\n\ntag: Tag identifying the type of fiber\n\nkey: Unique identifier of this child\n\ntype: The function/class/module associated with this fiber\n\nstateNode: The local state associated with this fiber\n\nreturn: The Fiber to return to after finishing processing this one\n\nchild: Singly Linked List Tree Structure\n\nsibling: Singly Linked List Tree Structure\n\nindex: Singly Linked List Tree Structure\n\nref: The ref last used to attach this node\n\npendingProps: Input is the data coming into process this fiber/Arguments/Props\n\nmemoizedProps: The props used to create the output\n\nupdateQueue: A queue of state updates and callbacks\n\nmemoizedState: The state used to create the output\n\nfirstContextDependency: A linked-list of contexts that this fiber depends on\n\nmode: (Bitfield) that describes properties about the fiber and its subtree\n\neffectTag: Effect\n\nnextEffect: Singly linked list fast path to the next fiber with side-effects\n\nfirstEffect: The first fiber with side-effect within this subtree\n\nlastEffect: The last fiber with side-effect within this subtree\n\nexpirationTime: Represents a time in the future by which this work should be completed\n\nchildExpirationTime: This is used to quickly determine if a subtree has no pending changes\n\nalternate: A pooled version of a Fiber-Every fiber that gets updated will\n\nactualDuration: Time spent rendering this Fiber and its descendants for the current update\n\nactualStartTime: This marks the time at which the work began(only if Fiber is active in render phase)\n\nselfBaseDuration: Duration of the most recent render time for this Fiber\n\ntreeBaseDuration: Sum of base times for all descedents of this Fiber.\n```\n\nWhile in DEV Mode, additional properties for (tracking) fibers\n```\n_debugID\n_debugSource\n_debugOwner\n_debugIsCurrentlyTiming\n```\nFunction **FiberNode** is incharge of creating the Fiber, which has a constructor function **createFiber** returning Fibernode . Both are relying on the following parameters\n\n```\ntag,\npendingProps,\nkey, \nmode\n```\nFunction **createWorkInProgress** is used to create an alternate fiber.(Pooling). Uses a double buffering pooling technique.\n```\n3 parameters (current, pendingProps, expirationTime)\nmaking a work in progress fiber\n  \n  if workInprogress = null\n    createFiber (new)\n  else\n    reset effect tags on the alternate\nthe rest of work in progress fiber\n```\n\nFunction(exported) **createFiberFromElement**. Hmm look this is incharge of creating all the fibers based on the React element type. \n```\nparameters(element, mode, expirationTime)\n\n  type = element.type\n  fiberTag\n    if \n      function \u003e shouldConstruct ? ClassComponent : InderterminateComponent\n    elif \n      string \u003e HostComponent\n    else\n      switch: case depending on type\n          REACT_FRAGMENT_TYPE \u003e return createFiberFromFragment(pendingProps, mode, expirationTime, key)\n          REACT_CONCURRENT_MODE_TYPE \u003e ConcurrentMode\n          REACT_STRICT_MODE_TYPE \u003e StrictMode\n          REACT_PROFILER_TYPE \u003e createFiberFromProfiler(pendingProps, mode, expirationTime, key)\n          REACT_PLACEHOLDER_TYPE \u003e PlaceholderComponent\n        default \n            REACT_PROVIDER_TYPE \u003e ContextProvider\n            REACT_CONTEXT_TYPE \u003e ContextConsumer\n            REACT_FORWARD_REF_TYPE \u003e ForwardRef\n            REACT_PURE_TYPE \u003e PureComponent\n         invariant \n    createFiber(fiberTag, pendingProps, key, mode)\n   return the created fiber\n          \n```\nReactWorkTags For Quick Reference\n\n```\nFunctionComponent = 0;\nFunctionComponentLazy = 1;\nClassComponent = 2;\nClassComponentLazy = 3;\nIndeterminateComponent = 4; \nHostRoot = 5; \nHostPortal = 6;\nHostComponent = 7;\nHostText = 8;\nFragment = 9;\nMode = 10;\nContextConsumer = 11;\nContextProvider = 12;\nForwardRef = 13;\nForwardRefLazy = 14;\nProfiler = 15;\nPlaceholderComponent = 16;\nPureComponent = 17;\nPureComponentLazy = 18;\n\nalso MAX_SIGNED_31_BIT_INT = 1073741823\n```\n\nFollowing Functions create different type of fibers, assign a type and expirationTime. Then using **createFiber** , return a Fiber.\n\n```\ncreateFiberFromFragment\ncreateFiberFromProfiler\ncreateFiberFromText\ncreateFiberFromHostInstanceForDeletion\ncreateFiberFromPortal\ncreateHostRootFiber \n```\n\nFunction **assignFiberPropertiesInDev** : Used for stashing WIP properties to replay failed work in DEV.\n\n----------------\n\n### What Are Root Fibers?\n\n**ReactFiberRoot.js**\n\nThe Host Fiber and it has the following properties and is created by **createFiberRoot**\n\n```\ncurrent: The currently active root fiber. This is the mutable root of the tree.\n\ncontainerInfo: Any additional information from the host associated with this root.\n\npendingChildren:\n\nearliestSuspendedTime: earliest priority levels that are suspended from committing.\nlatestSuspendedTime: latest priority levels that are suspended from committing.\n\nearliestPendingTime: earliest priority levels that are not known to be suspended.\nlatestPendingTime: latest priority levels that are not known to be suspended.\n\nlatestPingedTime: The latest priority level that was pinged by a resolved promise and can be retried.\n\ndidError: if error thrown\npendingCommitExpirationTime:\n\nfinishedWork: A finished work-in-progress HostRoot that's ready to be committed.\n\ntimeoutHandle: Timeout handle returned by setTimeout. Used to cancel a pending timeout\n\ncontext: Top context object, used by renderSubtreeIntoContainer\npendingContext:\n\n+hydrate: Determines if we should attempt to hydrate on the initial mount\n\nnextExpirationTimeToWorkOn: Remaining expiration time on this root.\n\nexpirationTime:\n\nfirstBatch:\n```\n\n----------------\n\n### Expiration Time\n\n**ReactFiberExpirationTime.js**\n\nContains functions concerning  ExpirationTime and when low priority and high priority Batches. High priority Batches have a longer expiration time than low priority while in DEV mode.\n\n```\n1 unit of expiration time represents 10ms\n\nmsToExpirationTime \u003e returns ms/10 + 2\nexpirationTimeToMS \u003e return (expirationTime - 2) * 10\n\n```\n\nHigh and Low Priority Times in ms\n\n```\nLOW_PRIORITY_EXPIRATION = 5000\nLOW_PRIORITY_BATCH_SIZE = 250\nHIGH_PRIORITY_EXPIRATION = __DEV__ ? 500 : 150\nHIGH_PRIORITY_BATCH_SIZE = 100\n```\n\nHigh Priority Uses the Function **computeInteractiveExpiration** with the currentTime. Low priority uses **computeAsyncExpiration**, likely used for offscreen renders. Both use the function **computeExpirationBucket** (currentTime, expirationInMs, bucketSizeMs).\n\n----------------\n\n### Methods For Detecting Fiber In A Stack\n\n**ReactCurrentFiber.js**\n\nNOTE: Recheck when this is used\n\nThe main function for describing what the fiber type is **describeFiber**\n```\nparameters(Fiber)\n  switch (depending on the tag)\n    IndeterminateComponent\n    FunctionComponent\n    FunctionComponentLazy\n    ClassComponent\n    ClassComponentLazy\n    HostComponent\n    Mode\n      name = getComponentName //Function returning a string based on Types(CAP_NAMES)-paramters is type\n      if\n        ownerName = getComponentName\n      return describeComponentFrame(name, source, ownerName)\n```\n\nSo **describeFiber** is used in a exported function **getStackByFiberInDevAndProd**\n\n```\ndo \n  info += describeFiber(node);\n  while workInProgress\n  return info\n```\n2 exports being the current Fiber and LifeCyclePhase\n\nMaybe add DEV stuff if they are needed\n\n------------\n\n\n### How The Stack Works\n\n**ReactFiberStack.js**\n\nNOTE: Updates are not sorted by priority, but by insertion; new updates are always appended to the end of the list.\n\nThe stack itself seems to be a push pop based on the index(initial value of -1), either increment the index when pushing or decrement when popping.\n```\nconst valueStack []\nlet fiberStack [] | null\n\nlet index = -1\n\ncreateCursor for assigning where to start looking in the stack\n\npop(cursor, fiber) \n if index \u003c 0 return ''\n current cursor = valueStack[index]\n assign null to valueStack since it's removed from stack\n index--\n\npush(cursor, value, fiber)\n  index++\n  valueStack[index] is the current cursor\n  current cursors is assigned the new value\n\n```\n\n----------------\n\n### How The ClassComponent Works(Updated and such)\n\n**ReactFiberClassComponent.js**\n\nthis is incharge of handling how the react components are updated:\n\nthe outer function incharge of sending props to the internal state is **applyDerivedStateFromProps**. Which handles\nMerging  of the partial state and the previous state. Where memoized state is compared with the previous and using methods like Redux object.assign. \nIt assigns a new state. There is a if case present that if it's not in a updatequeue then basestate(initial state) = memiozed state. \n\n\nThe structure of this is a lot like using Redux(payloads, assigning)\n\nThere is a main classComponentUpdater which is contains various functions:\n\n```\n\nisMounted \n\nenqueueSetState(inst, payload, callback)\n\tget various values on current time and expirationtimes for the given Fiber\n\tcreateUpdate\n\tenqueueUpdate \u003e takes in Fiber and the update which was just created\n\tscheduleWork \u003e schedule it for work (fiber and the expirationTime)\nenqueueReplaceState\n\tSame as above function but for replacing state\nenqueueForceUpdate\n\tSame as above but for forced updates\n```\n\nFunction for checking is the component should update **checkShouldComponentUpdate**\n\n```\nparameters(workInProgress, ctor, oldprops, newProps, oldState, newState, nextContext)\n const instance is the workinProgress\n\tif it's function\n\t\tstartPhaseTimer\n\t\tshouldUpdate \u003e also the returned value\n\t\tstopPhaseTimer\n\tif it's a pure component\n\t\treturn if they !shallowEqual\n```\nfunction **adoptClassInstance** \n\n```\n\n// The instance needs access to the fiber so that it can schedule updates\n\ninstance.updater = classComponentUpdater\n\n```\n\nThe main function for constructing the current class instance **constructClassInstance**\n\n```\nparameters(workInProgress, ctor, props, renderExpirationTime)\n\tlet isLegacyContextConsumer =  false\n\tlet unmaskedContext = emptyContextObject\n\tlet context = null\n\tcontextType = ctor.contextType\n\t\tif contextType is an object and true\n\t\t\tcontext = contextType.unstable_read()\n\t\telse \n\t\t\tunmaskedContext = getUnmaskedContext(workInProgress, ctor, true)\n\t\t\tconst contextTypes = ctor.contextTypes\n\t\t\tset isLegacyContextConsumer to (true?) depending on the contextTypes being present\n\t\t\tcontext is getMaskedContext if isLegacyContextConsumer is true\n\t\n\tconst instance = new ctor(props, context)\n\tthe new state is equal to the memoizedState if the state of the current instance is not null\t\t\n\tadoptClassInstance(workInProgress, instance)\n\tif isLegacyContextConsumer is true then cacheContext(workInProgress, unmaskedContext, context)\n\t\n\treturn instance\n\n```\n\nVarious calls on the Component\n\n```\n\ncallComponentWillMount(workInProgress, instance)\n\tstartPhaseTimer\n\told is instance state\n\tdepending on the typeof instance call either componentWillMount or UNSAFE_componentWillMount\n\tstopPhaseTimer\n\t\n\tif oldstate !== instance.state \n\ncallComponentWillRecieveProps(workInProgress, instance, newProps, nextContext)\n\tstartPhaseTimer\n\told is instance state\n\tdepending on the typeof instance call either componentWillReceiveProps or UNSAFE_componentWillReceiveProps\n\tstopPhaseTimer\n\t\n\tif instance.state !== oldState then enqueueReplaceState(instance, instance.state, null)\n\n```\n\nOnce the class instance is constructed then it needs to be mounted with **mountClassInstance**\n\n```\n\nparameters(workInProgress, ctor, newProps, renderExpirationTime)\n\tconst instance = workInProgress.stateNode;\n  \tinstance.props = newProps;\n  \tinstance.state = workInProgress.memoizedState;\n  \tinstance.refs = emptyRefsObject;\n\n\tcontextType = ctor.contextType\n\tif object and not null then instance.context does a unstable_read()\n\telse \n\t\tconst unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);\n    \t\tinstance.context = getMaskedContext(workInProgress, unmaskedContext);\n\t\n\tlet updateQueue = workInProgress.updateQueue \n\t\tif not null then processUpdateQueue\n\t\t\tand the instance state will equal memoizedState\n\tif ctor.getDerivedSTateFromProps is true(function) then applyDerivedStateFromProps\n\t\tand instance state is the memoizedState \n```\nstill need to understand these\n\n**resumeMountClassInstance**\n\n**updateClassInstance**\n\n--------------------------\n\n### How Child Fibers Are Reconciled\n\n**ReactChildFiber.js**\n\nThere is one main function **ChildReconciler** which does most of the work. There are multiple inner functions that make up this entire function. \n\n```\n\nparameters(shouldTrackSideEffects)\n\t\n\tdeleteChild(returnFiber, childToDelete)\n\t\t// Deletions are added in reversed order\n\t\tUses effectTag to determine what child to delete\n\t\tif there is no nextEffect then null otherwise \n\t\t\n\tdeleteRemainingChildren(returnFiber, currentFirstChild)\n\t\tusing the currentFirstChild, \n\t\t\tit uses a while cascades unto next child until all are deleted uding deleteChild\n\t\n\tmapRemainingChildren(returnFiber, currentFirstChild)\n\t\t// Add the remaining children to a temporary map\n\t\tlet existing be the current first\n\t\twhile existing is not null \n\t\t\tif key present \u003e existingChildren.set(existingChild.key(if no key then index), existingChild)\n\t\t\texistingChild = sibling\n\t\treturn existingChildren\t\n\t\n\tuseFiber(fiber, pendingProps, expirationTime)\n\t\tcreates a fiber clone using createWorkInProgress and sets the index to 0 and sibling to null\n\t\t\n\tplaceChild(newFiber, lastPlacedIndex, newIndex)\n\t\tconst current = alternate of the new fiber\n\t\tif current !null oldindex is current\n\t\t\tif \u003c lastPlacedIndex newFiber.effectTag is the new Placement\n\t\t\telse return oldIndex\n\t\t// This is an insertion.\n      \t\tnewFiber.effectTag = Placement;\n      \t\treturn lastPlacedIndex;\n\t\t\t\t\n\tplaceSingleChild(newFiber) \n\t\n\tupdateTextNode(returnFiber, current, textContent, expirationTime)\n\t\tif current null then return a new fiber using \n\t\t\tcreateFiberFromText\n\t\telse update the existing using \n\t\t\tuseFiber\n\t\n\tupdateElement(returnFiber, current, element, expirationTime)\n\t\tif current !== null and has a type then move it based on index\n\t\t\tuseFiber\n\t\t\tcoerceRef\n\t\t\treturn existing fiber with a updated .ref .return\n\t\telse insert and create a fiber using \n\t\t\tcreateFiberFromElement \n\t\t\tcoerceRef\n\t\t\treturn the createdFiber\n\t\t\t\n\tupdatePortal(returnFiber, current, portal, expirationTime)\n\t\tif null tag != HostPortal(worktag)\n\t\t\tinsert a new createdfiber using createFiberFromPortal and return it\n\t\telse update it using useFiber and return it\n\t\t\n\tupdateFragment(returnFiber, current, fragment, expirationTime, key)\n\t\tif null no tag != fragment\n\t\t\tinsert createFiberFromFragment and return it\n\t\telse update useFiber\n\t\n\tcreateChild(returnFiber, newChild, expirationTime)\n\t\t// Text nodes don't have keys.\n\t\tif typeOf 'string' or 'number' return using createFiberFromText\n\t\tif typeOf 'object and !==null\n\t\t\tswitch depending on newChild.$$typeof\n\t\t\t\tREACT_ELEMENT_TYPE \u003e createFiberFromElement \u003e coerceRef \u003e return\n\t\t\t\tREACT_PORTAL_TYPE \u003e createFiberFromPortal \u003e coerceRef \u003e return\n\t\t\t\t\n\t\t\tif newChild is an array or has iteration \u003e createFiberFromFragment\n\t\t\t\telse error throwOnInvalidObjectType\n\t\totherwise return null\n\t\n\tupdateSlot(returnFiber, OldFiber, newChild, expirationTime)\n\t\t// Update the fiber if the keys match, otherwise return null and remember text nodes don't have keys\n\t\t\t\n\t\t\tif typeof newChild is 'string' or 'number' \u003e return updateTextNode\n\t\t\t\tif key !== null \u003e null\n\t\t\tif typeof newChild is 'object' and !== null\n\t\t\t\tswitch depending on newChild.$$typeof\n\t\t\t\t\tREACT_ELEMENT_TYPE \u003e updateElement\n\t\t\t\t\t\tif type is REACT_FRAGMENT_TYPE \u003e return updateFragment\n\t\t\t\t\tREACT_PORTAL_TYPE \u003e if newchild.key matches \u003e updatePortal \t\n\t\t\t\t\n\t\t\t\tif newChild is an array or has iteration \u003e updateFragment\n\t\t\tthrow if none of the cases throwOnInvalidObjectType\n\t\n\t// The only difference is the newIdx that was created when mapping new children using mapRemainingChildren\n\tupdateFromMap(existingChildren, returnFiber, newIdx, newChild, expirationTime)\n\t\tif typeof newChild is 'string' or 'number' \u003e updateTextNode\n\t\t // const matchedFiber = existingChildren.get(newIdx)\n\t\t\n\t\tif typeof newChild is 'object' and !== null\n\t\t\tswitch depending on newChild.$$typeof\n\t\t\t\tREACT_ELEMENT_TYPE \u003e updateElement\n\t\t\t\t\t\tif type is REACT_FRAGMENT_TYPE \u003e return updateFragment\n\t\t\t\tREACT_PORTAL_TYPE \u003e if newchild.key matches \u003e updatePortal\n\n\t// Not Sure if this is accurate, FIX LATER\n\treconcileChildrenArray(returnFiber, currentFirstChild, newChildren, expirationTime)\n\t\tusing a For Loop this function will go through each children and their children\n\t\t\tit will compare with created map Idx? and alse keep track using a new Idx \n\t\t\t\tupdateSlot and if there is newFiber break the loop\n\t\t\t\tplaceChild in the correct index\n\t\t\t\t\n\t\tif the newIdx = newChildren.length then deleteRemainingChildren\n\t\tif oldFiber is null \u003e createChild \u003e placeChild\n\t\t\n\t\t// Add all children to a key map for quick lookups.\n    \t\tconst existingChildren = mapRemainingChildren(returnFiber, oldFiber);\n\t\t\n\t\tuse another For Loop and Keep scanning and use the map to restore deleted items as moves.\n\t\t\n\t\tfinally return resultingFirstChild\n\t\n\treconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, expirationTime\n\t\tas per comments \n\t\t// This is the same implementation as reconcileChildrenArray(),\n    \t\t// but using the iterator instead.\n\t\n\treconcileSingleTextNode(returnFiber, currentFirstChild, textContent, expirationTime)\n\t\tif currentFirstChild != null and tag matches HostText\n\t\t\tuse deleteRemainingChildren \u003e useFiber \u003e return\n\t\tdeleteRemainingChildren\n\t\tcreateFiberFromText \u003e return it\n\t\n\treconcileSingleElement(returnFiber, currentFirstChild, element, expirationTime)\n\t\t\twhile currentFirstChild !== null \n\t\t\t\tdeleteRemainingChildren \u003e useFiber \u003e coerceRef else deleteChild\n\t\t\t\treturn \u003e child.sibling \n\t\t\t\t// repeat until no siblings\n\t\t\tif element.type is REACT_FRAGMENT_TYPE \u003e return createFiberFromFragment\n\t\t\telse createFiberFromElement \u003e coerceRef \u003e return\n\t\n\treconcileSinglePortal(returnFiber, currentFirstChild, portal, expirationTime)\n\t\tsame as above SingleElement but Portals\n\t\n\treconcileChildFibers(returnFiber, currentFirstChild, newChild, expirationTime)\n\t\ttypeof newChild === 'object' and !== null;\n\t\t\tREACT_ELEMENT_TYPE \u003e placeSingleChild(reconcileSingleElement)\n\t\t\tREACT_PORTAL_TYPE \u003e placeSingleChild(reconcileSinglePortal)\n\t\tif typeof newChild is 'string' or 'number' \u003e placeSingleChild(reconcileSingleTextNode)\n\t\tif newChild isArray \u003e reconcileChildrenArray\n\t\tif newChild isiterable \u003e reconcileChildrenIterator\n\t\t\n\t\t\n\t\tdeleteReamainingChildren\n\t\n\tfinally it returns reconcileChildFibers\n\ncloneChildFibers(current, workInProgress)\n\tcreates a newchild by using createWorkInProgress(currentChild, currentChild.pendingProps, currentChild.expirationTime)\n\tworkInProgress.child = newChild\n\t\n\tRun a while loop on the children and go to next chid, clone it until none\n\t\n```\nEven though this function is MASSIVE, all it really does is implement Georgia Bush's NO CHILD LEFT BEHIND POLICY\n\n----------------\n\n### How Assigning Priority Works\n\nReactFiberPendingPriority.js\n\nMost of these functions just if there is work to be done and compare it to expirationTime and Mark different priroity.\nLooks complicated but once you read it a few times, it's quite simple. The abbreviations should help in remebering it cause putting the whole word just confuses the brain for like no reason. \n\n```\n// abbreviations\n\nexpirationTime = \t\tET\nerroredExpirationTime =\t\teET\t\t\nearliestPendingTime = \t\tePT\nlatestPendingTime = \t\tlPT\nearliestRemainingTime = \teRT\nearliestSuspendedTime = \teST\nlatestSuspendedTime = \t\tlST\npingedTime =\t\t\tPi\nlatestPingedTime =\t\tlPi\nrenderExpirationTime = \t\trET\n\nmarkPendingPriorityLevel(root, expirationTime)\n\t// Update the latest and earliest pending times\n\t\n\tconst ePT is root's ePT\n\tif NoWork then roots ePT is the ET\n\t\telse if ePT \u003e ET then root's ePT is ET\n\t\t\telse \n\t\t\t\tconst lPT is root's lPT\n\t\t\t\tif lPT \u003c ET then root's lPT is ET\n\t\t\t\t\t\n\tfindNextExpirationTimeToWorkOn(expiration, root)\n\n// This functions main purpose is to findNextExpirationToWorkOn \n// but if certain conditions on the root are present then markPendingPriorityLevel\n\nmarkCommittedPriorityLevels(root, earliestRemainingTime)\n\t\n\tif eRT = NoWork then clear root's ePT, lPT, eST, lST, lPi \n\t\tand findNextExpirationTimeToWorkOn(NoWork, root)\n\n\tconst lPT is root's lPT\n\tif lPT !== NoWork\n\t\tif lPT \u003c eRT then root's has no work\n\t\telse \n\t\t\tconst ePT is root's ePT\n\t\t\tif ePT \u003c eRT then root's ePT = lPT\n\n\t\n\tconst eST is root's eST\n\tif eST has NoWork then \n\t\tmarkPendingPriorityLevel\n\t\tfindNextExpirationTimeToWorkOn\n\t\n\tconst lST is root's lST\n\tif eRT \u003e lST then root's eST, lST, lPi = NoWork\n\t\tmarkPendingPriorityLevel\n\t\tfindNextExpirationTimeToWorkOn\n\t\n\tif eRT \u003c eST \n\t\tmarkPendingPriorityLevel\n\t\tfindNextExpirationTimeToWorkOn\n\n\t\n\tfindNextExpirationTimeToWorkOn\n\nhasLowerPriorityWork(root, erroredExpirationTime)\n\tassigns const lPT, lST, lPI to Root's counterparts \n\t\treturns a true by checking if any of the above const have NoWork \n\t\t\tand any of time are greater then the eET\n\t// thus assigning it low priroity value\n\nisPriorityLevelSuspended(root, expirationTime)\n\tconst eST, lST = root's eST, lST\n\treturn true if eST != NoWork and ET \u003e= eST and ET \u003c=lST\n\nmarkSuspendedPriorityLevel(root, suspendedTime)\n\tclearPing(root, suspendedTime) //this function checks if the root was pinged during render phase\n\t\n\t// This is a same function as markCommittedPriorityLevels but with ST and without marking priority levels\n\n\tfindNextExpirationTimeToWorkOn(suspendedTime, root)\n\nmarkPingedPriorityLevel(root, pingedTime)\n\tconst lPi is root's lPi\n\tif lPi has NoWork or lPi \u003c pingedTime then root's lPi is Pi\n\tfindNextExpirationTimeToWorkOn\n\nfindEarliestOutstandingPriorityLevel(root, renderExpirationTime)\n\tlet eET = rET\n\tconst ePT, eST = root's ePT, eST\n\tif NoWork and eST \u003c eET then eET is ePT\n\treturn earliestExpirationTime;\n\ndidExpireAtExpiration(root, currentTime)\n\troot's nextExpirationTimeToWorkOn = currenTime\n\n\nfindNextExpirationTimeToWorkOn(completedExpirationTime, root)\n\tconst eST, lST, ePT,lPi = root's counterparts\n\n\t// Work on the earliest pending time. Failing that, work on the latest pinged time\n  \t\n\tif nextExpirationTimeToWorkOn = NoWork then it = lST\n\tlet ET = nextExpirationTimeToWorkOn\n\t\tif NoWork then Et is eST\n\n\troot.nextExpirationTimeToWorkOn = nextExpirationTimeToWorkOn;\n  \troot.expirationTime = expirationTime;\n\n```\n----------------\n\n### How The Update Queue Works\n\n**ReactUpdateQueue**\n\nThis is a very interesting file because it creates not one but 2 queues. There is a main function **enqueueUpdate** which is responsible for creating those two queues. It has a very nice system, it checks if queue1 is present based on the Fiber's updateQueue. If the queue1 is null then it creates the queue1. The interesting part is that it creates a clone of the same queue obased on the fiber.alternate updateQueue. There is a function for creating the queue **createUpdateQueue**. There are multiple if within the enqueueUpdate such as if both queues are null then create both and if either is null then create clone of the using cloneUpdateQueue. It gets even more interesting because there is a function called **appendUpdateToQueue** which appends the updates to both queues. During processing of the update queue, there is a inner function which checks if the WIP queue is a Clone.\n\nThe UpdateQueue, also exported as a type. Intial values listed\n\n```\n    baseState,\n    firstUpdate: null,\n    lastUpdate: null,\n    firstCapturedUpdate: null,\n    lastCapturedUpdate: null,\n    firstEffect: null,\n    lastEffect: null,\n    firstCapturedEffect: null,\n    lastCapturedEffect: null,\n\n```\n\nThe update type \n\n```\n  expirationTime: ExpirationTime,\n\n// Tags below\n  tag: 0 | 1 | 2 | 3,\n  payload: any,\n  callback: (() =\u003e mixed) | null,\n\n  next: Update\u003cState\u003e | null,\n  nextEffect: Update\u003cState\u003e | null,\n\n```\n\n\nThe exported constants for reference\n\n```\n\n UpdateState = 0;\n ReplaceState = 1;\n ForceUpdate = 2;\nCaptureUpdate = 3;\n\n\n```\nOne of the coolest functions is **getStateFromUpdate**, which works a lot like Redux.\n\n**getStateFromUpdate** \n\n```\n\nparameters(workInProgress, queue, update, prevState, nextProps, instance)\n\tswitch case depending on the update.tag\n\t\tReplaceState \n\t\t\tconst payload = update.payload\n\t\t\tif the payload is a 'function' then return a payload.call(instance, prevState, nextProps)\n\t\t\treturn payload\n\t\tCaptureUpdate\n\t\t\tWIP effectTag\n\t\tUpdateState\n\t\t\tconst payload\n\t\t\tlet partialState\n\t\t\tif payload is a 'function' the partialState = payload.call as above\n\t\t\t else partialState is payload\n\t\t\tif partialState is null or undefined then return the prevState\n\t\t\t\n\t\t\treturn Object.assign({}, prevState, partialState)\n\t\t\t\n\t// I wonder if it's possible to put a global state here and natively implement Redux\n\t\t\n\t\tForceUpdate \u003e hasForceUpdate \u003e return prevState\n\treturn prevState\n```\n\n**commitUpdateQueue**\n\n```\nparameters(finishedWork, finishedQueue, instance, renderExpirationTime)\n\tcheck is the finishedQueue.firstCapturedUpdate isn't null\n\t\tif finQeue's lastUpdate isn't null then lastUpdate.next is the firstCapturedUpdate \n\t\t\tand the lastUpdate is lastCapturedUpdate\n\t\tfirstCapturedUpdate \u003e lastCapturedUpdate \u003e null\n\tcommitUpdateEffects then set 1stEffect \u003e LastEffect \u003e null\n\tcommitUpdateEffects then set 1stCapturedEffect \u003e lastCapturedEffect \u003e null\n\ncommitUpdateEffects(effect, instance) \n\twhile callback hell\n```\n\n\n-----------------------\n\n### How Context Is Handled\n\n**ReactFiberContext.js**\n\nMost of these functions from the looks of it just seem to be concerned with getting the context from the Fibers. \n\nThere seems to be a general pattern emerging. \nWhich is get something from a stack, store/cache, reconcile and then put it back in the stack. \n\nSo there is a function for getting the context from the current WIP fiber and acting on it. \n\n**getUnmaskedContext** and **getMaskedContext** return the context.\n\n**cacheContext** is reponsible for storing the context and assigning it to the WIP.stateNode\n\n**hasContextChanged** returns a boolean and checks if work was performed while it's in the Stack\n\nThe following 4 functions manage the Push Pop actions on the stackCursor\n\n```\n\npopContext\npopTopLevelContextObject\npushTopLevelContextObject \u003e double push to contextStack and didWIP\npushContextProvider \u003e double push using previousContext\n\n```\n\n**processChildContext**\n\n```\n\nparameters(fiber, type, parentContext)\n\tconst instance = fiber.stateNode;\n  \tconst childContextTypes = type.childContextTypes;\n\tlet childContext\n\tget the instance of the child context using the stop/start PhaseTimers\n\treturn {...parentContext, ...childContext};\n```\n\nThere is a function **invalidateContextProvider** that checks if change occured, then processChildContext and perform a the replacement on the stack using pop \u003e pop and then push \u003e push. If no change then a simple pop push.\n\n**findCurrentUnmaskedContext**\n\n```\n\nparameters(fiber)\n\t// assigns a node variable and checks the tag\n\t// lazy component uses getResultFromResolvedThenable comes from shared file ReactLazyComponent\n\tdo \n\t\tswitch depending on tag\n\t\t\tHostRoot \u003e return stateNode.context\n\t\t\tClassComponent \u003e using isContextProvider \u003e return MemoizedMergedChildContext\n\t\t\tClassComponentLazy \u003e same as ClassComponent but Lazy\n\t\t\n\n```\n\nPretty much this files is much like other files and it performs a switch with WIP fibers in the stack and change/replace them as needed. \n\n**ReactFiberHostContext.js**\n\n\nThis files is very similar but the main difference I'm seeing is that it creates a container for the Host root. \n\nNote: Saw this in Reconciler.js\n\n```\n\nInitiliaze the cursors for the Stack\n\nrequiredContext(c, Value)\n\treturn c\n\ngetRootHostContainer \u003e gets the requiredContext for the rootInstance\n\npushHostContainer(fiber, nextRootInstance)\n\t// Push current root instance onto the stack;\n\t push rootCursor, \u003e push contextCursor \u003e push NO_CONTEXT\n\tget HostContext \u003e pop context \u003e push nextRootContext\n\npopHostContainer \u003e pop cursors x 3\n\ngetHostContext \u003e using requiredContext get current cursor context\n\npushHostContext(fiber) \u003e double push on to the stack, the current and next\n\n// Do not pop unless this Fiber provided the current context.\n// pushHostContext() only pushes Fibers that provide unique contexts.\n\npopHostContext(fiber) \u003e double pop on the stack and fiber\n\n```\n-----------\n### How The Work is Handled.\n\n**READ BELOW ONLY IF YOU HAVE READ THE ABOVE, as these work files will easily make sense if the inner parts are understood.**\n\nThis file mostly as stated by the name begins the work on various parts. \n\n```\n\nreconcileChildren(current, workInProgress, nextChildren, renderExpirationTime)\n\tif there is no work being done on the current \n\t\tmountChildFibers(workInProgress, null, nextChildren, renderExpirationTime)\n\telse reconcileChildFibers\n\nforceUnmountCurrentAndReconcile(current, workInProgress, nextChildren, renderExpirationTime)\n\ton the workInProgress.child run reconcileChildFiber x2\n\nupdateForwardRef(current, workInProgress, type, nextProps, renderExpirationTime)\n\tif it doesn't have a hasLegacyContextChanged and memoizedProps=nextProps \n\t\tif ref = current then bailOut\n\n\treconcileChildren\n\tmemoizProps and return the WIP.child\n\nupdatePureComponent(current, workInProgress, Component, nextProps, updateExpirationTime, renderExpirationTime)\n\t an if bailoutconditions\n\t\n\tprepareToReadContext \u003e reconcileChildren \u003e memoizProps \u003e return WIP.child\n\nupdateFragment(current, workInProgress, renderExpirationTime)\n\tsame as pure but remember that fragments and the lack of context\n\nupdateMode(current, workInProgress, renderExpirationTime)\n\tsame but for pendingProps.Children\n\nupdateFunctionComponent(current, workInProgress, Component, nextProps, renderExpirationTime)\n\tsame as but getUnmaskedContext and getMaskedContext before reconciling\n\nupdateClassComponent(current, workInProgress, Component, nextProps, renderExpirationTime)\n\t\n\tprepareToreadContext\n\tif the current WIP.stateNode is null(not being worked on)\n\t\tthen constructClassInstance and mountClassInstance\n\t\telse resumeMountClassInstance\n\telse updateClassInstance since it's already being worked on\n\t\n\treturn finishClassComponent\n\nfinishClassComponent(current, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime)\n\tmarkRef for the current WIP\n\tan if bail condition\n\t\n\tlet nextChildren be null if there is no nextChildren, otherwise render the nextChild\n\n\tif the current isn't null then forceUnmountCurrentandReconcile otherwise reconcileChildren\n\n\tmemoizeState and Props \u003e return WIP.child\n\npushHostRootContext(workInProgress)\n\tif it has a pendingContext then pushTopLevelContextObject with a true value, otherwise if the root has only context then set it to false\n\tpushHostContainer\n\nupdateHostRoot(current, workInProgress, renderExpirationTime)\n\tpushHostRootContext\n\tassign variables to WIP.props/state and processUpdateQueue\n\tif nextChildren = prevChildren then restHydrationState and bail out\n\totherwise hydrate it \u003e mountChildFibers\n\tand ofcourse reconcileChildren \u003e return WIP.child\n\nupdateHostComponent(current, workInProgress, renderExpirationTime)\n\tpushHostContext \n\tassign WIP.type/pendingProps/memoizedProps\n\tmarkRef \u003e Deprioritize the subtree if needed \u003e reconcile \u003e memoizeProps \u003e return WIP.child\n\nupdateHostText \u003e just updater for above host functions\n\nresolveDefaultProps(Component, baseProps)\n\tusing object.assign and a for let in loop resolve the props taken from ReactElement\n\treturn baseProps\n\nmountIndeterminateComponent(current, workInProgress, Component, updateExpirationTime, renderExpirationTime)\n\tconst props = workInProgress.pendingProps\n\tif it's 'object' and !==null, and 'function'\n\t\tcancelWorkTimer \u003e readLazyComponentType \u003e startWorkTimer\n\tswitch (resolvedTag) \n\t\tFunctionComponentLazy \u003e updateFunctionComponent\n\t\tClassComponentLazy \u003e updateClassComponent\n\t\tForwardRefLazy \u003e updateForwardRef\n\t\tPureComponentlazy \u003e updatePureComponent\n\treturn WIP.props \u003e child\n\n\tassign variables and get unmasked and masked contexts \u003e prepareToReadContext\n\tif value is an 'object' and !null and value.render(function and undefined)\n\t\tthen get DerivedStateFromProps \u003e applyDerivedStateFromProps if needed \n\t\tadoptClassInstance \u003e mountClassInstance \u003e return finishClassComponent\n\totherwise reconcile \u003e memoizProps \u003e return WIP.child\n\nupdateSuspenseComponent(current, workInProgress, renderExpirationTime)\n\tcheck if it's currently being worked on the component has timed out \n\tif it's being worked on the forceUnmountCurrentAndReconcile else reconcileChildren\n\tWIP.memoized Props/State to the nextProps and DidTimeout \u003e return WIP.child\n\t\t\nupdatePortalComponent(current, workInProgress, renderExpirationTime)\n\tpushHostContainer\n\tif it isn't being worked then assign and reconcileChildFibers, else is same and \u003e memoize \u003e return\n\nupdateContextProvider\n\tsame as above function but newProps/oldProps = memoized\n\tpushProvider(workInProgress, newValue)\n\n\tif oldProps are present, bail out otherwise \u003e propagateContextChange\n\treconcile\n\nupdateContextConsumer\n\tprepareToReadContext \u003e assign new values \u003e reconcile \u003e return WIP.child\n\n// beginWork just uses the above function depending on the WIP.tag \n// Keep the expiration Time in mind as well\t\n// remember that purecomponents/lazy components have thenable functions, and just follows the same methods for pretty much all the cases.\n\n```\n\t\n\t\n### Complete Work\n\nThis file literally just completes what was started by BeginWork. The beginwork sets the pieces in motion and then CompleteWork acts on the pieces. \n\n**markUpdate** and **markRef** just tag the fibers. \n\n**appendAllChildren** runs a while loop on the childrens until all the siblings are accounted for. There is an inner function called **appendInitialChild** which sets the loop in motion. \n\n```\n\nif the work is mutable then \n\tupdateHostContainer \n\tupdateHostComponent \u003e get the context \u003e prepare the update \u003e if it has a payload \u003e markUpdate\n\tupdateHostText \u003e markUpdate\nelif persists \n\tappendAllChildrenToContainer(containerChildSet, workInProgress) \u003e run a while loop on child and siblings\n\tupdateHostContainer \u003e create the container \u003e append \u003e mark \u003e finalizeContainerChildren with the newChildSet\n\tupdateHostComponent \u003e switch old props with memoized and create a new instance \u003e get the host context \u003e prepareUpdate \u003e clone \u003e finalizeInitialChildren \u003e markUpdate\t\n\tupdateHostText \u003e if old !== newText then get host container, context \u003e create an instance \u003e markUpdate\nelse literally do nothing\n\n// The Main Function\n\ncompleteWork(current, workInProgress, renderExpirationTime)\n\tswitch depending on Tag\n\t\tall the functions are same for the Work Tags with little variation\n\t\tpop From Container\n\t\tUpdate The Container \n\n// Remember not all functions have these container...pure/fragments\n\n```\n\nThere is no need to go over the entire **ReactFiberUnwindWork** when all it's doing is just setting the values(container/whatever was acted upon in beginwork) to null by popping them from where they were put in and gets ready for the next rinse and repeat\nThere is also functions for throwing error for various conditions based on the catch error boundary which is part of the new api in React\nI will explain this in detail when I get the chance but if you have made it this far then you should automatically know what should happen here.\n\n\n------------\nCommitWork\n------------\n\n\n**ReactFiberReconciler.js**\n\nThis file is in charge of creating the container, and scheduling the whole Fiber Update process. \n\n```\n\n// 0 is PROD, 1 is DEV For BundleType\n\ngetContextForSubtree(parentComponent)\n\tif null then return emptyContextObject\n\n\tGet the map of the fiber instance, and findCurrentUnmaskedContext(fiber)\n\tif the fibers tag is ClassComponent then processChildContext, if it's lazy do the whole thenable and process context\n\n\treturn parentContext\n\nscheduleRootUpdate(current, element, expirationTime, callback)\n\tcreate \u003e enqueue \u003e scheduleWork \u003e return expirationTime\n\t\n\nupdateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback)\n\tget the current container, and contextForSubTree\n\tif context is null then return context else set it to pending\n\treturn schedule RootUpdate\n\nfindHostInstance(component)\n\tget the hostFiber using findCurrentHostFiber and return it's stateNode\n\ncreateContainer(containerInfo, isConcurrent, hydrate) \u003e return the created Fiber Root\n\nupdateContainer(element, container, parentComponent, callback)\n\ton the current container \u003e computeExpirationForFiber and return updateContainerAtExpirationTime\n\ngetPublicRootInstance(container)\n\tget the current container and depending on it's HostComponent get it's public Instance, which is the child.stateNode\n\n\n```\n\nit's creating a container for the current component/whatever(get Fibers and all for the root)\n\n\nand then scheduling an update at Root, \n\nat this stage setState should trigger, which ends up scheduling the work assigning expirationTimes. \n\nScheduling The Work will start the process of \n\n```\nBegin \u003e CompleteWork \u003e UnWind \u003e Commit\n\nWhere it does work such as Reconciling Child Fibers, context, and etc. \n\n```\n\nUpdate the component/whatever, rinse and repeat\n\n\n\n---------------\n\n**Scheduler.js**\n\nCheck Out This Repo\n\nhttps://github.com/spanicker/main-thread-scheduling\n\n----------------\n## REACT-DOM AND HOW IT WORKS\n\n---------------------\n\n### Something You May Have Realized. If You Actually Went Through The Files..... \n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSaeedMalikx%2FReact-Fiber-Architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSaeedMalikx%2FReact-Fiber-Architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSaeedMalikx%2FReact-Fiber-Architecture/lists"}