react-patterns

React组件、钩子、提供者相关的模式。适用于编写React/TSX代码的场景。

SKILL.md

--- frontmatter

name: react-patterns
description: React patterns for components, hooks, providers. Use when writing React/TSX code.

React Patterns

Requires: typescript-patterns skill

Components

Rule	Correct	Incorrect
Export	`export function X`	`export default X`
Props	`interface XProps`	`type XProps = {}`
Style	`function X()`	`const X = () =>`
Lazy	`lazy(() => import('./X'))`	direct import for heavy

Hooks

•Name: use<Name>, File: use<Name>.ts
•Define return interface: interface Use<Name>Return { ... }
•Wrap handlers in useCallback
•Memoize expensive computations with useMemo

Providers

•Context default: undefined
•Hook throws if used outside provider
•useMemo for context value
•useCallback for actions

Testing

•Colocate tests with components
•Use userEvent over fireEvent
•waitFor for async assertions
•MSW for network mocking

Structure

text

src/components/<Name>/<Name>.tsx
src/hooks/use<Name>.ts
src/providers/<Name>Provider.tsx

References

•references/test-utils.tsx - Testing utilities setup
•references/test-setup.ts - Vitest setup file

Assets

Copy and modify: