react-best-practices_skill

Overview

This skill codifies React best practices drawn from react.dev and Vercel engineering. It helps reviewers and developers find concrete fixes for performance, bundle size, and state/effect problems. Use it as a checklist when auditing React apps or diagnosing slow renders and hydration issues.

How this skill works

The skill inspects common React pain points: unnecessary effects, render waterfalls, bundle bloat, and poor state updates. It maps issues to targeted recommendations (e.g., eliminate waterfalls, enable the React Compiler, split context, use immutable updates) and points to concrete actions like dynamic imports, memoization, and parallel data fetching. It also provides a short decision tree to prioritize fixes by impact.

When to use it

• Reviewing React code for performance or correctness
• Debugging slow initial load, hydration flicker, or TTI regressions
• Optimizing bundle size and code-splitting strategy
• Writing or refactoring useEffect, state updates, or context logic
• Addressing excessive re-renders or UI jank during interactions

Best practices

• Avoid unnecessary useEffect calls; prefer deriving from props/state when possible
• Eliminate async waterfalls by fetching in parallel and using suspense where appropriate
• Enable the React Compiler (React 19+) to leverage automatic memoization and smaller runtime cost
• Use dynamic imports and preload on user intent to reduce initial bundle size and perceived latency
• Design state with clear ownership and immutable update patterns to prevent bugs and needless re-renders
• Split Context and hoist static JSX to limit component re-renders and improve rendering stability

Example use cases

• A page with slow first paint caused by sequential data fetching — parallelize requests and remove waterfall awaits
• Components re-rendering too often — audit props, memoize child components, and split context providers
• Large bundle with many barrel imports — convert heavy modules to dynamic imports and preload on intent
• useEffect runs on every render — verify dependency list or replace effect with derived state
• SSR hydration flicker — inline critical styles/scripts and ensure consistent server/client render output