optimizing-with-react-compiler
React Compiler Awareness
React Compiler (available separately) automatically memoizes code, reducing need for manual optimization. (verify use in project before using this skill)
What React Compiler Handles
Automatically memoizes:
- Component re-renders
- Expensive calculations
- Function references
- Object/array creation
Before (Manual Memoization):
function Component({ items }) {
const sortedItems = useMemo(() => {
return [...items].sort((a, b) => a.name.localeCompare(b.name));
More from djankies/claude-configs
reviewing-prisma-patterns
Review Prisma code for common violations, security issues, and performance anti-patterns found in AI coding agent stress testing. Use when reviewing Prisma Client usage, database operations, or performing code reviews on projects using Prisma ORM.
8migrating-from-v3
Migrate from Tailwind CSS v3 to v4 including configuration migration (JS to CSS), utility renames, opacity changes, and color system updates. Use when upgrading existing projects to v4.
6implementing-query-pagination
Implement cursor-based or offset pagination for Prisma queries. Use for datasets 100k+, APIs with page navigation, or infinite scroll/pagination mentions.
5using-reducers
Teaches useReducer for complex state logic in React 19. Use when state updates depend on previous state, multiple related state values, or complex update logic.
5implementing-code-splitting
Teaches code splitting with lazy() and Suspense in React 19 for reducing initial bundle size. Use when implementing lazy loading, route-based splitting, or optimizing performance.
5migrating-middleware-to-proxy
Teach middleware.ts to proxy.ts migration in Next.js 16. Use when migrating middleware, encountering middleware errors, or implementing request proxying.
5