react-production-patterns
Build production-ready React applications with performance optimization, code splitting, state management, and accessibility. Use for React components requiring optimization or complex state patterns. Use when this capability is needed.
معلومات المصدر
- المستودع
- tomevault-io/skills-registry
- آخر نشاط في المصدر
- ٢٨ أبريل ٢٠٢٦ في ٢٢:٥٣
- لغة SKILL.md المكتشفة
- الإنجليزية
- النجوم
- ٠
- التفرعات
- ٠
خيارات التثبيت
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
مراجعة ملفات المصدر
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
مستكشف الملفات
2 ملفاتعرض SKILL.md
SKILL.md
تعليمات المصدر · معاينة للقراءة فقط- name
- react-production-patterns
- description
- Build production-ready React applications with performance optimization, code splitting, state management, and accessibility. Use for React components requiring optimization or complex state patterns. Use when this capability is needed.
- metadata
- {"author":"ak-eyther"}
# React Production Patterns
## Performance Optimization
```typescript
import { memo, useMemo, useCallback } from 'react'
// Memoized component
const ExpensiveComponent = memo(({ data }) => {
const processedData = useMemo(() => {
return data.map(item => expensiveOperation(item))
}, [data])
const handleClick = useCallback(() => {
// Handler logic
}, [])
return <div onClick={handleClick}>{processedData}</div>
})
```
## Code Splitting
```typescript
import { lazy, Suspense } from 'react'
const HeavyComponent = lazy(() => import('./HeavyComponent'))
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
)
}
```
## State Management (Zustand)
```typescript
import { create } from 'zustand'
interface Store {
count: number
increment: () => void
}
const useStore = create<Store>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}))
function Counter() {
const { count, increment } = useStore()
return <button onClick={increment}>{count}</button>
}
```
## Accessibility (ARIA)
```typescript
function AccessibleButton() {
const [isExpanded, setIsExpanded] = useState(false)
return (
<button
aria-expanded={isExpanded}
aria-label="Toggle menu"
onClick={() => setIsExpanded(!isExpanded)}
>
Menu
</button>
)
}
```
## Custom Hooks
```typescript
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => clearTimeout(handler)
}, [value, delay])
return debouncedValue
}
```
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ak-eyther) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->
عرض على GitHub