csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(skills): sync thirdparty skills

Browse Source
This commit is contained in:
ci[bot]
2026-08-14 17:16:06 +08:00
parent 5d73964db8
commit 7233646398
68 changed files with 66265 additions and 4343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/thirdparty/ui-ux-pro-max/data/stacks/react.csv
Vendored
+62 -54
View File
@@ -1,54 +1,62 @@
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
1,State,Use useState for local state,Simple component state should use useState hook,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
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
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
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
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
6,Effects,Clean up effects,Return cleanup function for subscriptions timers,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
7,Effects,Specify dependencies correctly,Include all values used inside effect in deps 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
8,Effects,Avoid unnecessary effects,Don't use effects for transforming data or events,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
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
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
11,Rendering,Memoize expensive calculations,Use useMemo for costly computations,useMemo for expensive filtering/sorting,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensiveCalc(),Medium,https://react.dev/reference/react/useMemo
12,Rendering,Memoize callbacks passed to children,Use useCallback for functions passed as props,useCallback for handlers passed to memoized children,New function reference every render,"useCallback(() => {}, [deps])",const handler = () => {},Medium,https://react.dev/reference/react/useCallback
13,Rendering,Use React.memo wisely,Wrap components that render often with same props,memo for pure components with stable props,memo everything or nothing,memo(ExpensiveList),memo(SimpleButton),Low,https://react.dev/reference/react/memo
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,
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,
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
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,
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
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,
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,
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
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,
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
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,
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,
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
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,
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
29,Hooks,Follow rules of hooks,Only call hooks at top level and in React functions,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
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
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,
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
33,Context,Split contexts by concern,Separate contexts for different domains,ThemeContext + AuthContext,One giant AppContext,<ThemeProvider><AuthProvider>,<AppProvider value={{theme user...}}>,Medium,
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,
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
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
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,
38,Performance,Batch state updates,React 18 auto-batches but be aware,Let React batch related updates,Manual batching with flushSync,setA(1); setB(2); // batched,flushSync(() => setA(1)),Low,https://react.dev/learn/queueing-a-series-of-state-updates
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
40,ErrorHandling,Handle async errors,Catch errors in async operations,try/catch in async handlers,Unhandled promise rejections,try { await fetch() } catch(e) {},await fetch() // no catch,High,
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/
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
43,Accessibility,Use semantic HTML,Proper HTML elements for their purpose,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
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,
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,
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,
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,
48,TypeScript,Type state properly,Provide types for useState,useState<Type>() for complex state,Inferred any types,useState<User | null>(null),useState(null),Medium,
49,TypeScript,Type event handlers,Use React event types,React.ChangeEvent<HTMLInputElement>,Generic Event type,onChange: React.ChangeEvent<HTMLInputElement>,onChange: Event,Medium,
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,
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,
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
53,Patterns,Compound components,Related components sharing state,Tab + TabPanel sharing context,Prop drilling between related,<Tabs><Tab/><TabPanel/></Tabs>,<Tabs tabs={[]} panels={[...]}/>,Low,
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
1 No Category Guideline Description Do Don't Code Good Code Bad Severity Docs URL Applies To Status Verified At
2 1 State Use useState for local state Simple component state should use useState hook 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
3 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
4 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
5 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
6 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
7 6 Effects Clean up effects Return cleanup function for subscriptions timers 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
8 7 Effects Specify dependencies correctly Include all values used inside effect in deps array 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
9 8 Effects Avoid unnecessary effects Don't use effects for transforming data or events 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
10 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
11 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
12 11 Rendering Memoize expensive calculations Use useMemo for costly computations Prefer compiler-first memoization; use useMemo only for measured hotspots or explicit cache boundaries. useMemo for expensive filtering/sorting Use useMemo for expensive computations when profiling shows a real bottleneck Recalculate every render 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
13 12 Rendering Memoize callbacks passed to children Use useCallback for functions passed as props Use useCallback only when callback identity matters for measured child renders. useCallback for handlers passed to memoized children Use useCallback for handlers passed to memoized children when identity is a bottleneck New function reference every render 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
14 13 Rendering Use React.memo wisely Wrap components that render often with same props Keep React.memo as a measured optimization, not a blanket default. memo for pure components with stable props Use React.memo for pure components with stable props and real render cost memo everything or nothing 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
15 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
16 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
17 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
18 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
19 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
20 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
21 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
22 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
23 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
24 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
25 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
26 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
27 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
28 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
29 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
30 29 Hooks Follow rules of hooks Only call hooks at top level and in React functions 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
31 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
32 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
33 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
34 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
35 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
36 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
37 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
38 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
39 38 Performance Batch state updates React 18 auto-batches but be aware flushSync is a rare escape hatch for synchronous DOM reads/writes. Let React batch related updates Let React batch related updates; use flushSync only when synchronous DOM work is required Manual batching with flushSync 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
40 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
41 40 ErrorHandling Handle async errors Catch errors in async operations Catch errors in async operations and surface failures try/catch in async handlers Handle or report caught errors Unhandled promise rejections Unhandled or silently swallowed promise rejections try { await fetch() } catch(e) {} try { await save() } catch (error) { setError(error) } await fetch() // no catch await save() // no catch High https://react.dev/reference/react/useEffect react 19.2.x active 2026-08-13
42 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
43 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
44 43 Accessibility Use semantic HTML Proper HTML elements for their purpose 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
45 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
46 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
47 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
48 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
49 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
50 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
51 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
52 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
53 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
54 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
55 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
56 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
57 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
58 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
59 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
60 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
61 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
62 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