How To Dev

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

Introduction Zustand is an extremely lightweight, fast, and easy-to-use state management library for React applications. Highlighted advantages of Zustand include: No need for a Provider to wrap the application Extremely concise syntax that reduces boilerplate code Excellent support for TypeScript High performance thanks to a mechanism that only re-renders necessary components. Detail First, install it into your project as follows: yarn add zustand Let's start with a simple Counter app example for you to easily understand how to use it. Create file useCounterStore.ts import {create} from 'zustand' interface CounterState { count : number increment : () => void decrement : () => void reset : () => void } const useCounterStore = create < CounterState >( set => ({ count: 0 , increment : () => set ( state => ({ count: state.count + 1 })) , decrement : () => set ( state => ({ count: state.count - 1 })) , res...