This weekly digest focuses on React internals. Understanding how react works internally helps to follow best practices when coding, better understanding on performance and extra skills to debug those hard bugs. React defines that UI is a function of state: UI = f(s) . Every time the state changes react calculates the new UI (reconciliation) and renders the differences:
Read the following sources to understand better how the whole process works:
- Notes on React Internals: TL;DR version. Read this summary if you want to learn more about react but are not 100% on the mood to read a bunch of articles or posts.
- React Internals Presentation: A high level presentation that explains in slides all the concepts in the next bullets. I recommend to read this one first, and also last.
- React Design Principles: What principles was React defined on. It provides insight on why and how certain decisions were made. Learning the principles first will lead to the “aha” moment when digging into the internals.
- React Components, Elements and Instances: Understanding the difference between components, elements and instances. This section also introduces reconciliation.
- Reconciliation: How react understands the impact a change in state has on the UI. This step allows react to be optimal on what to update. This process it is also known as Virtual DOM diffing.
- Now Let’s focus on ReactDOM. Learn everything about React DOM from this tutorial. 5 posts that will give you the possibility to code your mini version of React.
- On React 16 the whole reconciliation algorithm was redesigned and Fiber was born. Get a high level view of how Fiber works and then deep dive into the specifics. Or if you don’t feel like reading anymore, check Lin Clark – A Cartoon Intro to Fiber – React Conf 2017 video.
- Saw a concept like memoized or algebraic effects and you want to learn more? Start in this React Basic Github Readme. Also, you can check Exploring React JS Internals post that links to more concepts on React internals (purity, composition, side effects, lazy evaluation, Higher order functions, immutability, currying, memoization and more!)
- If you reached here, you deserve a price! Check this GitHub repository with a comprehensive list of everything React.
Juan Manuel Allo Ron 