How To Dev

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 ...

Introduction In previous articles, I have guided you on using Viewport Culling and requestAnimationFrame to improve performance when using Konva to render 1,000 elements. Now, we will continue to improve further with Layer Caching and Tiling techniques to handle up to 10,000 elements. Prerequisites This article is extended from my previous articles, so please review the previous articles to grasp the necessary information before continuing. Detail Update file type.ts import type {GroupConfig} from 'konva/lib/Group' export interface ShapeData { id : string type : string x : number y : number size : number color : string } export interface ViewRect { x1 : number y1 : number x2 : number y2 : number } export interface ShapeItemProps extends GroupConfig { item : ShapeData image ?: HTMLImageElement onClick : ( id : string ) => void } export interface TileProps { items : ShapeData [] image : HTMLImageElement | undefined isZoomedOu...