Fähigkeiten react-patterns
📦

react-patterns

Sicher

Master React development patterns and best practices

Build production-ready React applications with confidence. Learn proven patterns for hooks, state management, and component design.

UnterstĂĽtzt: Claude Codex Code(CC)
🥉 74 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "react-patterns". When should I use Context versus a global store like Zustand?

Erwartetes Ergebnis:

Use Context for local shared state within a component subtree like theme or locale. Use Zustand for app-wide state that needs devtools, persistence, or is accessed across many unrelated components. Context is built-in but can cause re-renders; Zustand offers better performance for frequent updates.

Verwendung von "react-patterns". Is this useEffect necessary for fetching data on mount?

Erwartetes Ergebnis:

In React 19, prefer server components or data-fetching libraries like React Query over useEffect for data fetching. useEffect is appropriate for subscriptions or non-data side effects. For data, use libraries that handle caching, deduplication, and error states automatically.

Sicherheitsaudit

Sicher
v1 • 2/24/2026

All 6 static analyzer findings are false positives. The SKILL.md file is educational documentation about React patterns, not executable code. Pattern matches on words like 'useLocalStorage' and section headings triggered false alarms. No actual security risks detected.

1
Gescannte Dateien
204
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

React Developer Onboarding

Help new team members learn your React architecture patterns and coding standards quickly.

Component Refactoring Guidance

Get recommendations for breaking down large components and applying proper hook patterns.

State Management Decisions

Determine the right state solution from useState to global stores based on your needs.

Probiere diese Prompts

Basic Hook Pattern 
Explain when to extract a custom hook in React. Show the useLocalStorage pattern with example code.
Component Design Review 
Review this React component and suggest improvements based on component design principles. Identify if it should be split into smaller components.
State Management Selection 
I have an app with user auth, theme preferences, and real-time notifications. Recommend a state management approach and explain why.
React 19 Migration 
Explain how React 19 compiler affects memoization patterns. Show which useMemo and useCallback calls can be removed.

Bewährte Verfahren

  • Profile performance before optimizing - measure actual bottlenecks first
  • Prefer composition over inheritance - build small, focused components
  • Use stable unique keys instead of array indices for list rendering

Vermeiden

  • Deep prop drilling - use Context or component composition instead
  • Giant components with multiple responsibilities - split into smaller units
  • Using useEffect for everything - leverage server components where appropriate

Häufig gestellte Fragen

When should I extract a custom hook?
Extract a custom hook when the same logic pattern appears in multiple components, when you need to reuse stateful logic, or when component code becomes hard to read due to hook complexity.
Should I use Redux or Context for my app?
Start with Context for simple shared state. Use Redux or Zustand when you need devtools, middleware, time-travel debugging, or have complex state interactions across many components.
Are React 19 compiler features backward compatible?
React 19 requires React 19+. The compiler automates memoization but your existing useMemo and useCallback calls remain valid. You can remove unnecessary ones after upgrading.
How do I choose between useState and useReducer?
Use useState for simple values and independent state. Use useReducer when state has complex transitions, when multiple values update together, or when state logic benefits from explicit action types.
What is the compound component pattern?
Compound components work together through shared context. A parent component provides state via Context, and child components consume it. Examples include Tabs with TabList/Tab/TabPanel or Select with Option components.
When should I use error boundaries?
Place error boundaries around features that should fail independently. Use app-wide boundaries for graceful degradation, feature-level for isolated failures, and component-level for risky third-party integrations.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-patterns

Ref

main

Dateistruktur

đź“„ SKILL.md