The Heart of React || How React works under the hood

React is the magic box for most developers. But as we know, magic does not exist in our world. And today I’m going to open this box and explain in simple words how React builds a virtual tree, how it updates it, and at the same time we always see our cherished 60 frames per second. React Reconciliation - https://reactjs.org/docs/reconciliation.html React Fiber Architecture - https://github.com/acdlite/react-fiber-architecture ReactNext 2016 "What is React Fiber?" - https://youtu.be/aV1271hd9ew Heuristic (computer science) - https://en.wikipedia.org/wiki/Heuristic_(computer_science) List of priorities - https://github.com/facebook/react/blob/v18.2.0/packages/scheduler/src/SchedulerPriorities.js#L10 List of priority timeouts - https://github.com/facebook/react/blob/v18.2.0/packages/scheduler/src/forks/Scheduler.js#L67 Unstable exports - https://github.com/facebook/react/blob/v17.0.2/packages/scheduler/src/Scheduler.js#L407 Support AI Bruise: Patreon - https://www.patreon.com/AIBruise/membership Timecodes: 00:00 - Topic announcement 00:41 - Information sources 00:59 - Reconciliation short definition 01:11 - How react works under the hood 02:33 - React DOM and RN rendering 02:50 - Tree traversing algorithm 04:21 - Type changing real example 07:13 - Prioritization flow 08:25 - Prioritization realization in GitHub 09:25 - React Fiber intro 10:05 - Conclusion Subscribe to channel: https://www.youtube.com/channel/UCxmwNWXYWiNMXWy3VRmfEkw?sub_confirmation=1 #react #webdevelopment #programming #frontend #reactjs