القائمة
Master React performance optimization with memoization, code splitting, profiling, and Web Vitals monitoring
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill react-performanceيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens
Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime
Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | react-performance |
| description | Master React performance optimization with memoization, code splitting, profiling, and Web Vitals monitoring |
| sasmp_version | 2.0.0 |
| bonded_agent | 06-performance-optimization |
| bond_type | PRIMARY_BOND |
| input_validation | {"required_packages":[{"react":">=18.0.0"},{"web-vitals":">=3.0.0"}]} |
| output_format | {"code_examples":"jsx","metrics_target":{"lcp":"<2.5s","fid":"<100ms","cls":"<0.1"}} |
| error_handling | {"patterns":["graceful_degradation","lazy_fallback","error_boundary"]} |
| observability | {"logging":"web_vitals","metrics":["lcp","fid","cls","ttfb","inp"]} |
Master React performance optimization techniques including memoization, code splitting, lazy loading, and profiling tools.
// Prevent re-render if props unchanged
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
return <div>{data.value}</div>;
});
// Custom comparison
const Component = React.memo(
({ user }) => <div>{user.name}</div>,
(prevProps, nextProps) => {
return prevProps.user.id === nextProps.user.;
}
);
function ProductList({ products, searchTerm }) {
// Only re-filter when dependencies change
const filteredProducts = useMemo(() => {
console.log('Filtering...');
return products.filter(p =>
p.name.toLowerCase().includes(searchTerm.toLowerCase())
);
}, [products, searchTerm]);
return <div>{filteredProducts.map(renderProduct)}</div>;
}
function Parent() {
const [count, setCount] = useState(0);
// Stable function reference
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);
return <MemoizedChild onClick={handleClick} />;
}
const MemoizedChild = React.memo(({ onClick }) => {
console.log('Child rendered');
return <button onClick={onClick}>Click</button>;
});
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
function App() {
return (
<Suspense fallback={<LoadingSpinner />}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</Suspense>
);
}
function ProductPage() {
const [showReviews, setShowReviews] = useState(false);
const Reviews = lazy(() => import('./Reviews'));
return (
<div>
<ProductInfo />
<button onClick={() => setShowReviews(true)}>
Show Reviews
</button>
{showReviews && (
<Suspense fallback={<Spinner />}>
<Reviews />
</Suspense>
)}
</div>
);
}
import { FixedSizeList } from 'react-window';
function VirtualList({ items }) {
return (
<FixedSizeList
height={600}
itemCount={items.length}
itemSize={50}
width="100%"
>
{({ index, style }) => (
<div style={style}>
{items[index].name}
</div>
)}
</FixedSizeList>
);
}
function LazyImage({ src, alt }) {
const [isLoaded, setIsLoaded] = useState(false);
const [isInView, setIsInView] = useState(false);
const imgRef = useRef();
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsInView(true);
observer.disconnect();
}
},
{ threshold: 0.1 }
);
if (imgRef.current) observer.observe(imgRef.current);
return () => observer.disconnect();
}, []);
return (
<div ref={imgRef}>
{isInView && (
<img
src={src}
alt={alt}
onLoad={() => setIsLoaded(true)}
style={{ opacity: isLoaded ? 1 : 0 }}
/>
)}
</div>
);
}
// Good: Named imports
import { Button, Input } from 'components';
// Bad: Import everything
import * as Components from 'components';
async function exportData() {
const XLSX = await import('xlsx');
// Use XLSX only when needed
}
# Create React App
npm install --save-dev source-map-explorer
npm run build
npx source-map-explorer 'build/static/js/*.js'
# Vite
npm install --save-dev rollup-plugin-visualizer
// ❌ Overusing useMemo
const greeting = useMemo(() => `Hello ${name}`, [name]);
// ✅ Just compute
const greeting = `Hello ${name}`;
// ❌ Inline objects in deps
useEffect(() => {
fetchData(filters);
}, [filters]); // New object every render!
// ✅ Memoize object
const filters = useMemo(() => ({ category, sort }), [category, sort]);
// ❌ Creating functions in render
{items.map(item => <Item onClick={() => handle(item.id)} />)}
// ✅ Use useCallback
const handle = useCallback((id) => {...}, []);
{items.map(item => <Item onClick={handle} id={item.id} />)}
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
function sendToAnalytics(metric) {
console.log(metric);
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);
Difficulty: Advanced Estimated Time: 2-3 weeks Prerequisites: React Hooks, Component Architecture