How To Dev

Introduction In the previous article, I introduced Core Web Vitals as well as how to optimize for the LCP index and in this article, we will continue with the next index, which is INP. This index measures responsiveness when users interact, as fetching too much data then rendering a large list (like hundreds of thousands of items) will block the Main-thread. The solutions I will mention in this article to optimize INP include: Virtualization: there are many packages supporting Data-heavy Lists, you can choose to apply them effectively, just render what is in the viewport. Handling thousands of DOM nodes simultaneously and continuously is the main factor directly affecting the INP index. Web Workers: If you need to process heavy logic (calculating, formatting a large amount of data) before displaying, push that logic part to a Web Worker to free up the Main-thread. Debouncing & Transitions: Use a combination of debounce and hooks like useTransition or useDeferredValue to mark state ...

Introduction In the previous article, I provided much information related to React Fiber and Rendering Pipelines. I will further explain its operating mechanism and how to optimize performance more. At the same time, I will introduce how to use flushSync to set the priority of a task to a higher level. Prerequisites Please review the previous article to grasp some information about React Fiber before continuing. Detail For the example using useDeferredValue, you can try increasing the number of items processed or simulating a slower machine configuration to test it out. When you input continuously, you will see cases where everything still functions, but sometimes the machine will lag completely, unable to accept further input. Why is that? The reason lies in the principle I mentioned above, which is that React Fiber only works in the Render Phase when it can stop the current process to prioritize higher priority tasks (like user input), but once it enters the Commit Phase, it can no ...