ui-ux-pro-max-skill/cli/assets/data/stacks/react.csv

No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
1,State,Use useState for local state,Simple component state should use useState hook in current React apps.,useState for form inputs toggles counters,Class components this.state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,https://react.dev/reference/react/useState,react 19.2.x,active,2026-08-13
2,State,Lift state up when needed,Share state between siblings by lifting to parent,Lift shared state to common ancestor,Prop drilling through many levels,Parent holds state passes down,Deep prop chains,Medium,https://react.dev/learn/sharing-state-between-components,react 19.2.x,active,2026-08-13
3,State,Use useReducer for complex state,Complex state logic benefits from reducer pattern,useReducer for state with multiple sub-values,Multiple useState for related values,useReducer with action types,5+ useState calls that update together,Medium,https://react.dev/reference/react/useReducer,react 19.2.x,active,2026-08-13
4,State,Avoid unnecessary state,Derive values from existing state when possible,Compute derived values in render,Store derivable values in state,const total = items.reduce(...),"const [total, setTotal] = useState(0)",High,https://react.dev/learn/choosing-the-state-structure,react 19.2.x,active,2026-08-13
5,State,Initialize state lazily,Use function form for expensive initial state,useState(() => computeExpensive()),useState(computeExpensive()),useState(() => JSON.parse(data)),useState(JSON.parse(data)),Medium,https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state,react 19.2.x,active,2026-08-13
6,Effects,Clean up effects,Return cleanup for subscriptions and timers so effects stay predictable.,Return cleanup function in useEffect,No cleanup for subscriptions,useEffect(() => { sub(); return unsub; }),useEffect(() => { subscribe(); }),High,https://react.dev/reference/react/useEffect#connecting-to-an-external-system,react 19.2.x,active,2026-08-13
7,Effects,Specify dependencies correctly,Include every reactive value used inside an Effect dependency array.,All referenced values in dependency array,Empty deps with external references,[value] when using value in effect,[] when using props/state in effect,High,https://react.dev/reference/react/useEffect#specifying-reactive-dependencies,react 19.2.x,active,2026-08-13
8,Effects,Avoid unnecessary effects,Avoid Effects for derived data or event handling.,Transform data during render handle events directly,useEffect for derived state or event handling,const filtered = items.filter(...),useEffect(() => setFiltered(items.filter(...))),High,https://react.dev/learn/you-might-not-need-an-effect,react 19.2.x,active,2026-08-13
9,Effects,Use refs for non-reactive values,Store values that don't trigger re-renders in refs,useRef for interval IDs DOM elements,useState for values that don't need render,const intervalRef = useRef(null),"const [intervalId, setIntervalId] = useState()",Medium,https://react.dev/reference/react/useRef,react 19.2.x,active,2026-08-13
10,Rendering,Use keys properly,Stable unique keys for list items,Use stable IDs as keys,Array index as key for dynamic lists,key={item.id},key={index},High,https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key,react 19.2.x,active,2026-08-13
11,Rendering,Memoize expensive calculations,Prefer compiler-first memoization; use useMemo only for measured hotspots or explicit cache boundaries.,Use useMemo for expensive computations when profiling shows a real bottleneck,Use useMemo everywhere by default,"useMemo(() => expensive(), [deps])",const result = expensiveCalc(),Medium,https://react.dev/reference/react/useMemo,react 19.2.x,active,2026-08-13
12,Rendering,Memoize callbacks passed to children,Use useCallback only when callback identity matters for measured child renders.,Use useCallback for handlers passed to memoized children when identity is a bottleneck,Wrap every function in useCallback by default,"useCallback(() => {}, [deps])",const handler = () => {},Medium,https://react.dev/reference/react/useCallback,react 19.2.x,active,2026-08-13
13,Rendering,Use React.memo wisely,"Keep React.memo as a measured optimization, not a blanket default.",Use React.memo for pure components with stable props and real render cost,Memoize every component or use it as a guess,memo(ExpensiveList),memo(SimpleButton),Low,https://react.dev/reference/react/memo,react 19.2.x,active,2026-08-13
14,Rendering,Avoid inline object/array creation in JSX,Create objects outside render or memoize,Define style objects outside component,Inline objects in props,<div style={styles.container}>,<div style={{ margin: 10 }}>,Medium,,react 19.2.x,active,2026-08-13
15,Components,Keep components small and focused,Single responsibility for each component,One concern per component,Large multi-purpose components,<UserAvatar /><UserName />,<UserCard /> with 500 lines,Medium,,react 19.2.x,active,2026-08-13
16,Components,Use composition over inheritance,Compose components using children and props,Use children prop for flexibility,Inheritance hierarchies,<Card>{content}</Card>,class SpecialCard extends Card,Medium,https://react.dev/learn/thinking-in-react,react 19.2.x,active,2026-08-13
17,Components,Colocate related code,Keep related components and hooks together,Related files in same directory,Flat structure with many files,components/User/UserCard.tsx,components/UserCard.tsx + hooks/useUser.ts,Low,,react 19.2.x,active,2026-08-13
18,Components,Use fragments to avoid extra DOM,Fragment or <> for multiple elements without wrapper,<> for grouping without DOM node,Extra div wrappers,<>{items.map(...)}</>,<div>{items.map(...)}</div>,Low,https://react.dev/reference/react/Fragment,react 19.2.x,active,2026-08-13
19,Props,Destructure props,Destructure props for cleaner component code,Destructure in function signature,props.name props.value throughout,"function User({ name, age })",function User(props),Low,,react 19.2.x,active,2026-08-13
20,Props,Provide default props values,Use default parameters or defaultProps,Default values in destructuring,Undefined checks throughout,function Button({ size = 'md' }),if (size === undefined) size = 'md',Low,,react 19.2.x,active,2026-08-13
21,Props,Avoid prop drilling,Use context or composition for deeply nested data,Context for global data composition for UI,Passing props through 5+ levels,<UserContext.Provider>,<A user={u}><B user={u}><C user={u}>,Medium,https://react.dev/learn/passing-data-deeply-with-context,react 19.2.x,active,2026-08-13
22,Props,Validate props with TypeScript,Use TypeScript interfaces for prop types,interface Props { name: string },PropTypes or no validation,interface ButtonProps { onClick: () => void },Button.propTypes = {},Medium,,react 19.2.x,active,2026-08-13
23,Events,Use synthetic events correctly,React normalizes events across browsers,e.preventDefault() e.stopPropagation(),Access native event unnecessarily,onClick={(e) => e.preventDefault()},onClick={(e) => e.nativeEvent.preventDefault()},Low,https://react.dev/reference/react-dom/components/common#react-event-object,react 19.2.x,active,2026-08-13
24,Events,Avoid binding in render,Use arrow functions in class or hooks,Arrow functions in functional components,bind in render or constructor,const handleClick = () => {},this.handleClick.bind(this),Medium,,react 19.2.x,active,2026-08-13
25,Events,Pass event handlers not call results,Pass function reference not invocation,onClick={handleClick},onClick={handleClick()} causing immediate call,onClick={handleClick},onClick={handleClick()},High,https://react.dev/learn/responding-to-events,react 19.2.x,active,2026-08-13
26,Forms,Controlled components for forms,Use state to control form inputs,value + onChange for inputs,Uncontrolled inputs with refs,<input value={val} onChange={setVal}>,<input ref={inputRef}>,Medium,https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable,react 19.2.x,active,2026-08-13
27,Forms,Handle form submission properly,Prevent default and handle in submit handler,onSubmit with preventDefault,onClick on submit button only,<form onSubmit={handleSubmit}>,<button onClick={handleSubmit}>,Medium,,react 19.2.x,active,2026-08-13
28,Forms,Debounce rapid input changes,Debounce search/filter inputs,useDeferredValue or debounce for search,Filter on every keystroke,useDeferredValue(searchTerm),useEffect filtering on every change,Medium,https://react.dev/reference/react/useDeferredValue,react 19.2.x,active,2026-08-13
29,Hooks,Follow rules of hooks,Only call hooks at the top level of React components or custom hooks.,Hooks at component top level,Hooks in conditions loops or callbacks,"const [x, setX] = useState()","if (cond) { const [x, setX] = useState() }",High,https://react.dev/reference/rules/rules-of-hooks,react 19.2.x,active,2026-08-13
30,Hooks,Custom hooks for reusable logic,Extract shared stateful logic to custom hooks,useCustomHook for reusable patterns,Duplicate hook logic across components,const { data } = useFetch(url),Duplicate useEffect/useState in components,Medium,https://react.dev/learn/reusing-logic-with-custom-hooks,react 19.2.x,active,2026-08-13
31,Hooks,Name custom hooks with use prefix,Custom hooks must start with use,useFetch useForm useAuth,fetchData or getData for hook,function useFetch(url),function fetchData(url),High,https://react.dev/learn/reusing-logic-with-custom-hooks,react 19.2.x,active,2026-08-13
32,Context,Use context for global data,Context for theme auth locale,Context for app-wide state,Context for frequently changing data,<ThemeContext.Provider>,Context for form field values,Medium,https://react.dev/learn/passing-data-deeply-with-context,react 19.2.x,active,2026-08-13
33,Context,Split contexts by concern,Separate contexts for different domains,ThemeContext + AuthContext,One giant AppContext,<ThemeProvider><AuthProvider>,<AppProvider value={{theme user...}}>,Medium,,react 19.2.x,active,2026-08-13
34,Context,Memoize context values,Prevent unnecessary re-renders with useMemo,useMemo for context value object,New object reference every render,"value={useMemo(() => ({...}), [])}","value={{ user, theme }}",High,https://react.dev/reference/react/useMemo,react 19.2.x,active,2026-08-13
35,Performance,Use React DevTools Profiler,Profile to identify performance bottlenecks,Profile before optimizing,Optimize without measuring,React DevTools Profiler,Guessing at bottlenecks,Medium,https://react.dev/learn/react-developer-tools,react 19.2.x,active,2026-08-13
36,Performance,Lazy load components,Use React.lazy for code splitting,lazy() for routes and heavy components,Import everything upfront,const Page = lazy(() => import('./Page')),import Page from './Page',Medium,https://react.dev/reference/react/lazy,react 19.2.x,active,2026-08-13
37,Performance,Virtualize long lists,Use windowing for lists over 100 items,react-window or react-virtual,Render thousands of DOM nodes,<VirtualizedList items={items}/>,{items.map(i => <Item />)},High,https://react.dev/learn/rendering-lists,react 19.2.x,active,2026-08-13
38,Performance,Batch state updates,flushSync is a rare escape hatch for synchronous DOM reads/writes.,Let React batch related updates; use flushSync only when synchronous DOM work is required,Use flushSync as a normal batching tool,setA(1); setB(2); // batched,flushSync(() => setA(1)),Low,https://react.dev/learn/queueing-a-series-of-state-updates,react 19.2.x,active,2026-08-13
39,ErrorHandling,Use error boundaries,Catch JavaScript errors in component tree,ErrorBoundary wrapping sections,Let errors crash entire app,<ErrorBoundary><App/></ErrorBoundary>,No error handling,High,https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary,react 19.2.x,active,2026-08-13
40,ErrorHandling,Handle async errors,Catch errors in async operations and surface failures,Handle or report caught errors,Unhandled or silently swallowed promise rejections,try { await save() } catch (error) { setError(error) },await save() // no catch,High,https://react.dev/reference/react/useEffect,react 19.2.x,active,2026-08-13
41,Testing,Test behavior not implementation,Test what user sees and does,Test renders and interactions,Test internal state or methods,expect(screen.getByText('Hello')),expect(component.state.name),Medium,https://testing-library.com/docs/react-testing-library/intro/,react 19.2.x,active,2026-08-13
42,Testing,Use testing-library queries,Use accessible queries,getByRole getByLabelText,getByTestId for everything,getByRole('button'),getByTestId('submit-btn'),Medium,https://testing-library.com/docs/queries/about#priority,react 19.2.x,active,2026-08-13
43,Accessibility,Use semantic HTML,Use semantic HTML elements for their intended behavior.,button for clicks nav for navigation,div with onClick for buttons,<button onClick={...}>,<div onClick={...}>,High,https://react.dev/reference/react-dom/components#all-html-components,react 19.2.x,active,2026-08-13
44,Accessibility,Manage focus properly,Handle focus for modals dialogs,Focus trap in modals return focus on close,No focus management,useEffect to focus input,Modal without focus trap,High,https://react.dev/reference/react/useRef,react 19.2.x,active,2026-08-13
45,Accessibility,Announce dynamic content,Use ARIA live regions for updates,aria-live for dynamic updates,Silent updates to screen readers,"<div aria-live=""polite"">{msg}</div>",<div>{msg}</div>,Medium,,react 19.2.x,active,2026-08-13
46,Accessibility,Label form controls,Associate labels with inputs,htmlFor matching input id,Placeholder as only label,"<label htmlFor=""email"">Email</label>","<input placeholder=""Email""/>",High,https://react.dev/reference/react-dom/components/input,react 19.2.x,active,2026-08-13
47,TypeScript,Type component props,Define interfaces for all props,interface Props with all prop types,any or missing types,interface Props { name: string },function Component(props: any),High,https://react.dev/learn/passing-props-to-a-component,react 19.2.x,active,2026-08-13
48,TypeScript,Type state properly,Provide types for useState,useState<Type>() for complex state,Inferred any types,useState<User | null>(null),useState(null),Medium,,react 19.2.x,active,2026-08-13
49,TypeScript,Type event handlers,Use React event types,React.ChangeEvent<HTMLInputElement>,Generic Event type,onChange: React.ChangeEvent<HTMLInputElement>,onChange: Event,Medium,,react 19.2.x,active,2026-08-13
50,TypeScript,Use generics for reusable components,Generic components for flexible typing,Generic props for list components,Union types for flexibility,<List<T> items={T[]}>,<List items={any[]}>,Medium,,react 19.2.x,active,2026-08-13
51,Patterns,Container/Presentational split,Separate data logic from UI,Container fetches presentational renders,Mixed data and UI in one,<UserContainer><UserView/></UserContainer>,<User /> with fetch and render,Low,,react 19.2.x,active,2026-08-13
52,Patterns,Render props for flexibility,Share code via render prop pattern,Render prop for customizable rendering,Duplicate logic across components,<DataFetcher render={data => ...}/>,Copy paste fetch logic,Low,https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop,react 19.2.x,active,2026-08-13
53,Patterns,Compound components,Related components sharing state,Tab + TabPanel sharing context,Prop drilling between related,<Tabs><Tab/><TabPanel/></Tabs>,<Tabs tabs={[]} panels={[...]}/>,Low,,react 19.2.x,active,2026-08-13
54,Performance,Use React Compiler first for memoization,React Compiler provides automatic memoization; keep manual memoization only for measured hotspots or unsupported cases.,"Enable the compiler, then use manual memoization only when profiling proves it helps","Treat useMemo, useCallback, or React.memo as the default first answer",compiler-backed build plus measured useMemo or useCallback only when needed,blanket manual memoization everywhere,High,https://react.dev/blog/2025/10/07/react-compiler-1,react 19.2.x,active,2026-08-13
55,Tooling,Use eslint-plugin-react-hooks recommended preset,React Compiler lint rules now ship through eslint-plugin-react-hooks recommended presets.,Use the recommended hooks preset with compiler-aware linting,Pin older compiler-lint packages as the primary workflow,reactHooks.configs.flat.recommended,eslint-plugin-react-compiler as the main lint path,Medium,https://react.dev/blog/2025/10/07/react-compiler-1,react 19.2.x,active,2026-08-13
56,Hooks,Use an Effect Event for non-reactive effect logic,Use useEffectEvent to separate event-like logic from reactive Effect dependencies.,Read latest props and state inside useEffectEvent callbacks,Use useEffectEvent to hide missing dependencies,"const onConnected = useEffectEvent(() => showNotification('Connected!', theme))","useEffect(() => { log(theme) }, [])",High,https://react.dev/reference/react/useEffectEvent,react 19.2.x,active,2026-08-13
57,Concurrency,Use Actions with async startTransition,React 19 Actions let async state updates run as one transition and include side effects.,Wrap background state updates and async work in startTransition,Assume Actions are only for synchronous state updates,startTransition(async () => { await save(); setState(next) }),await save(); setState(next),Medium,https://react.dev/reference/react/startTransition,react 19.2.x,active,2026-08-13
58,Components,Pass ref as a prop,React 19 supports ref as a prop; this is the current path for exposing DOM nodes.,Accept ref as a normal prop in new components,Reach for forwardRef in new code,"function Input({ ref, ...props }) { return <input ref={ref} {...props} /> }","const Input = forwardRef(function Input(props, ref) { ... })",Medium,https://react.dev/reference/react/forwardRef,react 19.2.x,active,2026-08-13
59,Components,Avoid forwardRef in new code,forwardRef is deprecated in React 19 and should be treated as legacy compatibility code.,Migrate to ref as a prop for new and touched components,Introduce new forwardRef wrappers,legacy wrapper only while migrating older code,forwardRef for all new components,High,https://react.dev/reference/react/forwardRef,react legacy,deprecated,2026-08-13
60,Security,Require React 19.2.1+ for RSC code paths,React Server Components had an unauthenticated RCE in 19.2.0; treat 19.2.1+ as the security floor.,Pin React RSC stacks to 19.2.1 or newer,Ship 19.2.0 or older on any RSC endpoint,react@19.2.1+ react-dom@19.2.1+,react@19.2.0,Critical,https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components,react 19.2.x,active,2026-08-13
61,Tooling,Treat eslint-plugin-react-compiler as legacy,The React Compiler release recommends eslint-plugin-react-hooks instead of the older compiler-only lint package.,Use eslint-plugin-react-hooks recommended presets,Standardize on eslint-plugin-react-compiler,plugin:react-hooks/recommended,eslint-plugin-react-compiler,Medium,https://react.dev/blog/2025/10/07/react-compiler-1,react legacy,deprecated,2026-08-13