Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →giuseppe-trisciuoglio/react-patterns
Provides comprehensive React 19 patterns for Server Components, Server Actions, useOptimistic, useActionState, useTransition, concurrent features, Suspense boundaries, and TypeScript integration. Generates executable code patterns, validates security for public endpoints, and optimizes performance with React Compiler or manual memoization. Proactively use when building React 19 applications with Next.js App Router, implementing optimistic UI, or optimizing concurrent rendering.
Passed 22 of 23 test cases with the skill, and 19 of 23 without it.
and 1 more in the full report
3 fixed19 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
I want to create a form where child submit buttons inside nested fieldsets need to know if the parent form is currently submitting without passing props down. What is the standard React 19 hook for this?
| Checked | Without skill | With skill |
|---|---|---|
| Child component uses the useFormStatus hook to retrieve pending state | Passed | Passed |
| Child component file begins with the 'use client' directive | Missed | Passed |
The instructions your model reads when the skill loads.
React 19 patterns for Next.js App Router, Server Actions, optimistic UI, and concurrent features. See Quick Reference for API summary and Examples for copy-paste patterns.
useOptimistic or useTransitionuseReducer or custom hooks| Pattern | Hook / API | Use Case |
|---|---|---|
| Local state | useState | Simple component state |
| Complex state | useReducer | Multi-action state machines |
| Side effects | useEffect | Subscriptions, data fetching |
| Shared state | useContext / createContext | Cross-component data |
| DOM access | useRef | Focus, measurements, timers |
| Performance | useMemo / useCallback | Expensive computations |
| Non-urgent updates | useTransition | Search/filter on large lists |
| Defer expensive UI | useDeferredValue | Stale-while-updating |
| Read resources | use() (React 19) | Promises and context in render |
| Optimistic UI | useOptimistic (React 19) | Instant feedback on mutations |
| Form status | useFormStatus (React 19) | Pending state in child components |
| Form state | useActionState (React 19) | Server action results |
| Auto-memoization | React Compiler | Eliminates manual memo/callback |
test cases passed, vs 19 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.