# performance

> Performance patterns for rendering, data loading, and code splitting. Keywords: performance, memoization, virtualization, code splitting, lazy loading.

- Author: willyu1007
- Repository: willyu1007/AI_First_Template
- Version: 20251224182030
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/willyu1007/AI_First_Template
- Web: https://mule.run/skillshub/@@willyu1007/AI_First_Template~performance:20251224182030

---

---
name: performance
description: "Performance patterns for rendering, data loading, and code splitting. Keywords: performance, memoization, virtualization, code splitting, lazy loading."
---

# Performance

This skill lists high-signal performance patterns for frontend apps.

---

## 1. Rendering

- Use `React.memo` for expensive components when props are stable.
- Use `useMemo` for expensive computations (filter/sort/map on large arrays).
- Use `useCallback` for handlers passed to memoized children.

---

## 2. Lists and virtualization

- For large lists/tables, use virtualization instead of rendering everything.
- Avoid re-creating row objects and callbacks on every render.

---

## 3. Code splitting

- Lazy-load heavy routes and rarely-used features.
- Split large vendor bundles when appropriate.