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 React Fiber is the core reconciliation engine of React supported since version 16, helping to change the rendering mechanism from synchronous to asynchronous. Advantages: Ability to pause and resume work: Allows React to break the rendering process into small units of work (fibers) so as not to block the main thread. Task prioritization: Prioritizes direct user interactions (keystrokes, clicks) over background data processing tasks. UX Improvement: Minimizes lag (jank) when the application has to handle complex UI components or large data lists. Detailed Workflow React Rendering Pipeline Trigger Phase When you call setState() or dispatchAction, React marks the changed nodes as dirty and uses the lane mechanism to mark upwards to the corresponding parent Fiber Nodes. Fiber: Acts as a "unit of work." Each component is a Fiber node containing information about state, props and links to parent/child/sibling nodes. Render Phase - Calculation This is where Reconciliati...