React is one of the most popular JavaScript libraries for building user interfaces. But how does it work behind the abstraction of components and props? In this post, we'll look at some of the core principles that make React tick under the hood.
The Virtual DOM
React keeps a lightweight representation of the real DOM in memory called the virtual DOM. Rather than manipulating the browser's DOM directly, React creates, updates, and deletes virtual DOM nodes. When state changes in a React component, that component's render function is called and the virtual DOM gets updated with the new JSX tree.
React then compares the new virtual DOM against the previous one using the diffing algorithm. It figures out which virtual DOM nodes have changed based on the difference. Once React knows which virtual DOM nodes have changed, then it updates only those objects in the real DOM. This selective updating process is extremely performant compared to manual DOM manipulation.
Diffing Algorithm
When diffing two virtual DOM trees, React first compares the root elements. If they are different types, the old tree is thrown away and the new one is created. If they are the same type, React recursively checks the attributes and child elements. Any components with the same reference are preserved to maintain the state. Finally, React updates the real DOM with the necessary changes. This minimizes updates to the real DOM which is important for performance.
Unidirectional Data Flow
Data in React apps follow a unidirectional flow downwards from parent to child components. This means child components cannot directly modify the parent component state - they can only pass up data via callbacks. This results in a more predictable component state simplifies debugging, and allows React to optimize performance better with assumptions about data flow. Modifying the state directly in child components can lead to bugs if that state then gets updated by a parent.
Reconciliation Process
Whenever a component's state is updated, React schedules a reconciliation process. This checks all components affected by the state change and calls their render methods to generate new virtual DOM trees. React then compares the new and old virtual DOMs using diffing. Child components will re-render even if their own state has not changed. Finally, the changes are flushed to the real DOM in a single optimized update rather than multiple individual updates.
Performance Optimizations
In addition to the virtual DOM, React uses other strategies like memoization and debouncing to optimize performance. Memoization refers to caching component outputs if inputs have not changed. Debouncing delays are potentially expensive operations to avoid repeated calls on each update. Together, these techniques allow React to efficiently re-render UIs based on state changes. The virtual DOM combined with reconciliation algorithms and smart optimizations makes React very fast compared to direct DOM manipulation.
Conclusion
While React components provide a declarative API, a lot is happening behind the scenes to make it efficient and fast. The virtual DOM, diffing algorithm, unidirectional data flow, and reconciliation process allow React to optimize updates and render efficiently. Understanding how React works under the hood helps build robust applications.