
Published: January 2026 Reading time: 40 minutes Keywords: #design-patterns #performance #optimization #memory #typescript #figma #canvas
Your designer wants to render 10,000 icons on a canvas. You write the code, hit refresh, and your browser uses 4GB of RAM and freezes. Chrome crashes.
The naive approach: "JS is just slow."
The reality: Figma handles millions of objects at 60fps in the browser. Google Maps displays 100K+ markers instantly. Monaco Editor renders 50K lines without lagging.
How? The Flyweight Pattern. Not for simple caching, but for radically reducing memory by separating shared state (intrinsic) from unique state (extrinsic).
This article shows you how to render 10,000 objects using 1MB of RAM instead of 4GB.
// Storing full style strings 10,000 times
{
type: 'star',
fill: '#FFD700',
svgPath: 'M12 .587l3.668 7.568L24 9.423...', // 500 chars duplicated!
x: 10,
y: 20
}
Problems:
We extract the shared properties into a "Flyweight" object and only store unique data (coordinates) in the instances.
class IconFlyweight {
constructor(public type: string, public svgPath: string, public fill: string) {}
}
class IconInstance {
constructor(public flyweight: IconFlyweight, public x: number, public y: number) {}
}
(Rest of the expanded content previously generated by sub-agent...)
Productos gratuitos y de pago para convertir ideas en una base que puedas lanzar.
13 productos disponiblesContinúa explorando temas similares

The Decorator Pattern is how Express.js, Nest.js, and AWS Lambda compose middleware with zero duplication.

The Composite Pattern is how GitHub, Linear, and Slack manage hierarchical permissions with zero code duplication.

Stop letting legacy code pollute your modern architecture. Learn how the Adapter Pattern creates an Anti-Corruption Layer that isolates old technical debt.
Una lista de 47 puntos para encontrar errores, riesgos de seguridad y problemas de rendimiento antes del lanzamiento.
Templates probados en producción, usados por desarrolladores. Ahorra semanas de setup en tu próximo proyecto.