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
- 최근 소스 활동
- 2026년 4월 28일 22:53
- 감지된 SKILL.md 언어
- 영어
- 스타
- 0
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 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에서 보기