Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/dipro-vn/dipro-ai-boost --skill react-performanceThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | react-performance |
| description | null |
Category: react · Status: 🟢 Active
Khi component re-render thừa, list lớn lag, hoặc tính toán nặng lặp lại.
useMemo cho tính toán nặng; useCallback cho callback truyền xuống child memo.React.memo cho child tốn kém nhận props ổn định.key ổn định, duy nhất (id thật, không dùng index khi list đổi thứ tự).lazy/Suspense) và virtualize list dài.const Row = React.memo(function Row({ item, onPick }: RowProps) {
return <li onClick={() => onPick(item.id)}>{item.label}</li>;
});
const handlePick = useCallback((id: string) => select(id), [select]);
const sorted = useMemo(() => heavySort(items), [items]);
Good: Row memo + handlePick useCallback ổn định + key={item.id}.
Avoid: key={index}, memo hóa mọi thứ vô tội vạ, callback mới mỗi render phá memo.
key ổn định, duy nhất (không dùng index khi list đổi)memo/useMemo/useCallback dùng đúng chỗ