Agent skill
react-performance
Comprehensive React and Next.js performance optimization guide. Covers waterfall elimination, bundle size reduction, server-side optimization, re-render prevention, and rendering performance. Use when building, reviewing, or optimizing React/Next.js applications for speed.
Install this agent skill to your Project
npx add-skill https://github.com/s-hiraoku/synapse-a2a/tree/main/.claude/skills/react-performance
SKILL.md
React Performance
Systematic performance optimization for React and Next.js applications, organized by impact.
Priority 1: Eliminate Waterfalls (CRITICAL)
Sequential async operations are the single biggest performance killer. Fix these first.
Defer Await
Move await to the point of use, not the point of declaration.
// BAD: Sequential — total time = fetch1 + fetch2
async function Page() {
const user = await getUser();
const posts = await getPosts(user.id);
return <Feed user={user} posts={posts} />;
}
// GOOD: Parallel where possible
async function Page() {
const userPromise = getUser();
const postsPromise = getPosts(); // if independent
const [user, posts] = await Promise.all([userPromise, postsPromise]);
return <Feed user={user} posts={posts} />;
}
Suspense Streaming
Wrap slow data behind <Suspense> so the shell renders instantly.
export default function Page() {
return (
<main>
<Header /> {/* instant */}
<Suspense fallback={<Skeleton />}>
<SlowDataSection /> {/* streams in */}
</Suspense>
</main>
);
}
Partial Dependencies
When promises have partial dependencies, start independent work immediately.
async function Dashboard() {
const userPromise = getUser();
const settingsPromise = getSettings(); // independent
const user = await userPromise;
const postsPromise = getPosts(user.id); // depends on user
const [settings, posts] = await Promise.all([settingsPromise, postsPromise]);
return <View user={user} settings={settings} posts={posts} />;
}
Priority 2: Bundle Size (CRITICAL)
Direct Imports
Never import from barrel files in production code.
// BAD: Pulls entire library
import { Button } from '@/components';
import { format } from 'date-fns';
// GOOD: Tree-shakeable
import { Button } from '@/components/ui/button';
import { format } from 'date-fns/format';
Dynamic Imports
Code-split heavy components that aren't needed on initial render.
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('@/components/chart'), {
loading: () => <ChartSkeleton />,
ssr: false, // skip SSR for client-only components
});
const Editor = dynamic(() => import('@/components/editor'), {
loading: () => <EditorSkeleton />,
});
Defer Third-Party Scripts
Load analytics, logging, and non-critical scripts after hydration.
// BAD: Blocks hydration
import { analytics } from 'heavy-analytics';
analytics.init();
// GOOD: Load after hydration
useEffect(() => {
import('heavy-analytics').then(({ analytics }) => analytics.init());
}, []);
Preload on Intent
Preload resources when user shows intent (hover, focus).
function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
const router = useRouter();
return (
<Link
href={href}
onMouseEnter={() => router.prefetch(href)}
onFocus={() => router.prefetch(href)}
>
{children}
</Link>
);
}
Priority 3: Server-Side Performance (HIGH)
Request-Scoped Deduplication
Use React.cache() to deduplicate data fetches within a single request.
import { cache } from 'react';
export const getUser = cache(async (id: string) => {
return db.user.findUnique({ where: { id } });
});
// Called in layout.tsx AND page.tsx — only one DB query
Minimize Serialization
Only pass the data client components actually need.
// BAD: Serializes entire user object
<ClientAvatar user={user} />
// GOOD: Pass only what's needed
<ClientAvatar name={user.name} avatarUrl={user.avatarUrl} />
Non-Blocking Background Work
Use after() for work that shouldn't block the response.
import { after } from 'next/server';
export async function POST(request: Request) {
const data = await processRequest(request);
after(async () => {
await logAnalytics(data);
await sendNotification(data);
});
return Response.json(data); // returns immediately
}
Priority 4: Re-render Prevention (MEDIUM)
Derived State
Compute derived values during render, never in effects.
// BAD: Extra render cycle
const [items, setItems] = useState([]);
const [count, setCount] = useState(0);
useEffect(() => setCount(items.length), [items]);
// GOOD: Derive during render
const [items, setItems] = useState([]);
const count = items.length;
Stable References
Use callback-based setState and extract callbacks outside render.
// BAD: New function every render
<Button onClick={() => setCount(count + 1)} />
// GOOD: Stable reference
<Button onClick={() => setCount(c => c + 1)} />
Primitive Dependencies
Use primitives in dependency arrays to avoid false positives.
// BAD: Object reference changes every render
useEffect(() => { ... }, [config]);
// GOOD: Primitive values are stable
useEffect(() => { ... }, [config.apiUrl, config.timeout]);
Lazy State Initialization
Pass initializer functions for expensive initial state.
// BAD: Runs every render
const [data, setData] = useState(expensiveParse(raw));
// GOOD: Runs only on mount
const [data, setData] = useState(() => expensiveParse(raw));
Memoize Expensive Components
Extract heavy computation into memoized child components.
const ExpensiveList = memo(function ExpensiveList({ items }: { items: Item[] }) {
return items.map(item => <ComplexItem key={item.id} item={item} />);
});
useTransition for Deferrable Updates
Use startTransition for non-urgent state updates.
const [isPending, startTransition] = useTransition();
function handleSearch(query: string) {
setInputValue(query); // urgent: update input
startTransition(() => setResults(search(query))); // deferrable: update results
}
Priority 5: Rendering Performance (LOW-MEDIUM)
Content Visibility
Apply CSS content-visibility for long scrollable lists.
.list-item {
content-visibility: auto;
contain-intrinsic-size: 0 80px;
}
Hoist Static JSX
Extract JSX that doesn't depend on props/state outside the component.
// BAD: Recreated every render
function Layout({ children }) {
return (
<div>
<footer><p>Copyright 2026</p></footer>
{children}
</div>
);
}
// GOOD: Created once
const footer = <footer><p>Copyright 2026</p></footer>;
function Layout({ children }) {
return <div>{footer}{children}</div>;
}
Conditional Rendering
Prefer ternary over && to avoid rendering 0 or "".
// BAD: Renders "0" when count is 0
{count && <Badge count={count} />}
// GOOD: Explicit boolean check
{count > 0 ? <Badge count={count} /> : null}
Quick Reference
| Issue | Fix | Priority |
|---|---|---|
| Sequential fetches | Promise.all() / Suspense |
CRITICAL |
| Barrel imports | Direct path imports | CRITICAL |
| Large initial bundle | next/dynamic |
CRITICAL |
| Redundant DB calls | React.cache() |
HIGH |
| Over-serialized props | Pass primitives only | HIGH |
| Derived state in useEffect | Compute during render | MEDIUM |
| Unstable callbacks | useCallback / callback setState |
MEDIUM |
| Long lists | Virtualization + content-visibility |
MEDIUM |
| Non-urgent updates | useTransition |
MEDIUM |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
s-hiraoku/synapse-a2a
task-planner
Guide for decomposing large tasks into a structured plan with dependency chains, managing priorities, and distributing work across agents. Outputs plan cards or delegation messages as the team contract; TodoList for personal micro-steps.
s-hiraoku/synapse-a2a
react-performance
Comprehensive React and Next.js performance optimization guide. Covers waterfall elimination, bundle size reduction, server-side optimization, re-render prevention, and rendering performance. Use when building, reviewing, or optimizing React/Next.js applications for speed.
s-hiraoku/synapse-a2a
release
Update version in pyproject.toml, plugin.json, and add changelog entry. This skill should be used when the user wants to bump the version number and update CHANGELOG.md. Triggered by /release or /version commands.
s-hiraoku/synapse-a2a
api-design
Guide API design for REST, GraphQL, gRPC, and CLI interfaces. Use this skill when designing new APIs, reviewing existing API contracts, or establishing API conventions for a project. Produces consistent, well-documented API specifications.
s-hiraoku/synapse-a2a
pr-guardian
Continuously monitor a GitHub PR for merge conflicts, CI failures, and CodeRabbit review comments, then automatically fix any issues found. Polls every 5 minutes and loops until every check is green. Use this skill whenever a PR has just been created or code has been pushed to a PR branch — it should be the default follow-up action after any PR creation or push. Also trigger on: "watch this PR", "guard this PR", "monitor CI", "keep fixing until green", "PRを監視して", "CIが通るまで 直して", /pr-guardian. When a PostToolUse hook reports that a push or PR creation just happened, proactively invoke this skill to start monitoring without waiting for the user to ask.
s-hiraoku/synapse-a2a
post-impl2
Workflow: Test workflow with non-existent agent target. . Triggered by /post-impl2 command.
Didn't find tool you were looking for?