update

Author: gazcn007

components

@@ -0,0 +1,133 @@
+---
+slug: intro-to-react-fiber
+title: Introduction to React Fiber
+description: A comprehensive guide to understanding React Fiber, its architecture, and how it improves React performance
+keywords: [react, react fiber, javascript, web development, performance]
+image: ./diff.jpg
+authors: [gazcn007]
+tags: [react, javascript, web development]
+---
+
+import { ReactFiber, SlideShow } from '@patternize/components';
+
+:::info
+This blog will explain React Fiber Internal Algorithms, we will:
+
+- Revisit how React diff works
+- Problems with Tree Traversal
+- Morris Traversal
+
+It's recommended to have a basic understanding of React, virtualDOM, and diff before reading this blog.
+:::
+
+You can first experience the difference between React Fiber (v17+) and pre-Fiber (v16) by playing with the playground below:
+
+<ReactFiber />
+
+You can tell a huge difference between the two versions, the old reconcilor is very slow, but the fiber one is very smooth.
+
+![](./diff.jpg)
+
+### Diff Calculation of React
+
+React's diff calculation is based on the virtualDOM, which is a tree structure that represents the UI. When a state change happens, React will calculate the difference between the old virtualDOM and the new virtualDOM, and then apply the changes to the realDOM.
+
+![MinimalEDTrees](./MinimalEDTrees.jpg)
+
+However, calculating the edit distance of two unordered trees is NP-Complete, and the standard algorithm needs at least a runtime of **O(n^3)**.
+
+:::tip
+
+There are papers that show that the problem is NP-Complete. Because it is equivalent to a graph isomorphism problem.
+
+![Np-Hard.jpg](./NpHard.jpg)
+
+:::
+
+React uses a **heuristic approach** that compares nodes level-by-level rather than doing an exhaustive node-by-node comparison. While this may sometimes update more nodes than strictly necessary, it ensures no required updates are missed while being much more efficient than a full tree traversal. The algorithm trades perfect accuracy for speed and predictability.
+
+![](./ReactDoc.jpg)
+
+You can see the heuristic approach of diff traversal in the gif below - **React compares the tree level by level instead of node by node.**
+
+![](./DiffTraversal.gif)
+
+### Problem with Recursion
+
+What’s wrong with doing a full tree traversal for diff in the above animation?
+
+Well, there are two problems with traversing the tree using recursion, we all know in computer science:
+
+1. For any tree recursion, the call stack is O(n)
+2. It is impossible to pause the traversal and stop the stack from growing while you are doing recursion.
+
+**Here is an interactive slide show of the call stack of the recursion stack:**
+
+(You can navigate back and forth using Previous and Next button)
+
+export const StackSlideShow = () => {
+const images = [
+'/slideshow/React-Stack/React-Fiber.001.jpeg',
+'/slideshow/React-Stack/React-Fiber.002.jpeg',
+'/slideshow/React-Stack/React-Fiber.003.jpeg',
+'/slideshow/React-Stack/React-Fiber.004.jpeg',
+'/slideshow/React-Stack/React-Fiber.005.jpeg',
+'/slideshow/React-Stack/React-Fiber.006.jpeg',
+'/slideshow/React-Stack/React-Fiber.007.jpeg'
+];
+return <SlideShow maxWidth='1000px' maxHeight='460px' images={images}/>;
+}
+
+<StackSlideShow />
+
+## Solution to the problems - Morris Traversal
+
+Morris Traversal is a way to traverse a tree without using recursion. It is a linear time algorithm that uses a single stack to store the nodes.
+
+**Here is an interactive slide show of traversing the tree with Morris Traversal:**
+
+export const FiberSlideShow = () => {
+const images = [
+'/slideshow/React-Fiber/React-Fiber.001.jpeg',
+'/slideshow/React-Fiber/React-Fiber.002.jpeg',
+'/slideshow/React-Fiber/React-Fiber.003.jpeg',
+'/slideshow/React-Fiber/React-Fiber.004.jpeg',
+'/slideshow/React-Fiber/React-Fiber.005.jpeg',
+'/slideshow/React-Fiber/React-Fiber.006.jpeg',
+'/slideshow/React-Fiber/React-Fiber.007.jpeg',
+'/slideshow/React-Fiber/React-Fiber.008.jpeg',
+'/slideshow/React-Fiber/React-Fiber.009.jpeg',
+'/slideshow/React-Fiber/React-Fiber.010.jpeg',
+'/slideshow/React-Fiber/React-Fiber.011.jpeg'
+];
+return <SlideShow maxWidth='1000px' maxHeight='460px' images={images}/>;
+}
+
+<FiberSlideShow />
+
+**With Morris Traversal, the call stack is constant O(1) space. Runtime is O(1) for each evaluation. And you can pause the traversal anytime!**
+
+This is exactly what React Fiber is doing in their code - adding more path between the nodes to turn a tree into a graph like Morris Traversal.
+
+![](graph.jpg)
+
+## React Fiber with concurrency
+
+What you can do with fiber once you have O(1) time and space for each evaluation and being able to pause the traversal is concurrent rendering.
+
+This is how React Fiber achieves concurrent rendering, you can see the animation below:
+
+export const ConcurrencySlideShow = () => {
+const images = [
+'/slideshow/React-Fiber-Concurrency/React-Fiber-Concurrency.001.jpeg',
+'/slideshow/React-Fiber-Concurrency/React-Fiber-Concurrency.002.jpeg',
+'/slideshow/React-Fiber-Concurrency/React-Fiber-Concurrency.003.jpeg',
+'/slideshow/React-Fiber-Concurrency/React-Fiber-Concurrency.004.jpeg',
+'/slideshow/React-Fiber-Concurrency/React-Fiber-Concurrency.005.jpeg',
+'/slideshow/React-Fiber-Concurrency/React-Fiber-Concurrency.006.jpeg',
+'/slideshow/React-Fiber-Concurrency/React-Fiber-Concurrency.007.jpeg'
+];
+return <SlideShow maxWidth='1000px' maxHeight='460px' images={images}/>;
+}
+
+<ConcurrencySlideShow />

docs/Algorithms/ReactFiber/DiffTraversal.gif

@@ -5,15 +5,20 @@ sidebar_label: Introduction
 ---
 
 ## Power of 2
-    1 << x === 2^x
 
+```javascript
+(1 << x === 2) ^ x;
+```
 
 ## Log Base of 2
-    # log(a) base b = log(a)/log(b)
-    32 >> 5 === log(32)/log(2) 
 
+```javascript
+# log(a) base b = log(a)/log(b)
+32 >> 5 === log(32)/log(2)
+```
 
 ## Count Ones In Binary Representation
+
 - `n&(n-1)` rule: is used when you want to quickly count how many `1s` in your binary number, every-time you do `n&(n-1)`, a `1` in your binary form will be removed:
 
 ```java
@@ -45,8 +50,6 @@ int count_one(int n) {
 }
 ```
 
-
-
 ## References:
-- https://leetcode.com/problems/sum-of-two-integers/discuss/84278/A-summary%3A-how-to-use-bit-manipulation-to-solve-problems-easily-and-efficiently
 
+- https://leetcode.com/problems/sum-of-two-integers/discuss/84278/A-summary%3A-how-to-use-bit-manipulation-to-solve-problems-easily-and-efficiently

docs/Algorithms/ReactFiber/MinimalEDTrees.jpg

@@ -1,8 +1,8 @@
 ---
 id: LC101
-title: LC101. Symmetric Tree
-sidebar_label: LC101. Symmetric Tree
-tags: ['Patterns/Tree', 'DataStructures/Tree']
+title: Symmetric Tree
+sidebar_label: Symmetric Tree
+tags: ["Patterns/Tree", "DataStructures/Tree"]
 ---
 
 ## Problem Description
@@ -22,6 +22,7 @@ For example, this binary tree [1, 2, 2, 3, 4, 4, 3] is symmetric:
 ```
 
 But the following [1, 2, 2, null, 3, null, 3] is not:
+
 ```
     1
    / \
@@ -30,26 +31,29 @@ But the following [1, 2, 2, null, 3, null, 3] is not:
    3    3
 ```
 
-## Solution 
+## Solution
 
 ### High level strategy
+
 To check whether two nodes are identical, we can check the following conditions:
+
 1. If both nodes are null, then they **are the same**.
 2. If one of the nodes is null, then they **are not the same**.
 3. If the value of one node is not equal to the value of the other, then they **are not the same**.
 
 To check whether a tree is symmetrical, we can simply apply the logics above to the opposite nodes on each side of the tree. That is, we compare the right child of the left child with the left child of the right child, so on and so forth. We recurse down both sides of the root node, and return true if and only if both sides return true. The time complexity of this solution is **O(n)**, where 'n' is equal to the number of nodes. The space complexity of this solution is **O(logn)**, or **O(h)**, where 'h' is equal to the height of the tree.
 
-### Code 
+### Code
+
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 <Tabs
-  defaultValue="js"
-  values={[
-    { label: 'Javascript', value: 'js', },
-    { label: 'Java', value: 'java', }
-  ]
+defaultValue="js"
+values={[
+{ label: 'Javascript', value: 'js', },
+{ label: 'Java', value: 'java', }
+]
 }>
 <TabItem value="js">
 
@@ -64,18 +68,19 @@ import TabItem from '@theme/TabItem';
  **/
 
 const isSymmetric = (root) => {
-    if (root === null) return true;
-    return isSame(root.left, root.right);
+  if (root === null) return true;
+  return isSame(root.left, root.right);
 };
 
 const isSame = (node1, node2) => {
-    if (node1 === null && node2 === null) return true;
-    if (node1 === null || node2 === null) return false;
-    if (node1.val !== node2.val) return false;
-    
-    return isSame(node1.left, node2.right) && isSame(node1.right, node2.left);
+  if (node1 === null && node2 === null) return true;
+  if (node1 === null || node2 === null) return false;
+  if (node1.val !== node2.val) return false;
+
+  return isSame(node1.left, node2.right) && isSame(node1.right, node2.left);
 };
 ```
+
 </TabItem>
 <TabItem value="java">
 
@@ -92,25 +97,26 @@ private boolean isSymmetricHelp(TreeNode left, TreeNode right){
     return isSymmetricHelp(left.left, right.right) && isSymmetricHelp(left.right, right.left);
 }
 ```
+
 </TabItem>
 </Tabs>
 
 ## Other Solutions
+
 <details>
 <summary>BFS Approach</summary>
 
-
 ```java
 /**
  * We can also explore each level through BFS,
  * then iterate through all nodes in each level to see if they are a mirror
- * (same idea as checking if a string is a palindrome). 
+ * (same idea as checking if a string is a palindrome).
  */
 
 class Solution {
     public boolean isSymmetric(TreeNode root) {
         if (root == null) return true;
-        Queue<TreeNode> queue = new LinkedList<>(); 
+        Queue<TreeNode> queue = new LinkedList<>();
         queue.add(root);
         while(queue.size() > 0) {
             int size = queue.size();
@@ -136,4 +142,5 @@ class Solution {
     }
 }
 ```
+
 </details>