React Best Practices 2026

Component & Code Quality ⭐⭐⭐⭐⭐

• Absolute imports over relative (tsconfig paths)
• Barrel exports (index.ts) for clean imports
• Feature-based folder structure over Type-based
• Colocate component, hook, test & style files
• Meaningful component & variable naming
• ESLint + Prettier + Husky setup
• Strict TypeScript mode

Hooks Usage Rules ⭐⭐⭐⭐⭐

• Never call Hooks inside loops or conditions
• Avoid overusing useEffect (use derived state instead)
• useMemo & useCallback only when measurably needed
• useRef for mutable values that shouldn’t trigger re-render

State Rules ⭐⭐⭐⭐⭐

• Local state first, lift only when needed
• URL as State (search params) for shareable UI state
• Never store derived data in state
• Server state & client state — always keep separate

JSX & Rendering Rules ⭐⭐⭐⭐⭐

• Never use array index as key prop
• Avoid anonymous functions in JSX props
• Avoid object/array literals directly in JSX props
• Always handle loading, error & empty states

Security ⭐⭐⭐⭐⭐

• Avoid dangerouslySetInnerHTML (XSS risk)
• Never expose secrets to client via env variables
• Never store sensitive data in localStorage

Accessibility ⭐⭐⭐⭐⭐

• Semantic HTML first (button not div with onClick)
• ARIA only when semantic HTML is not enough
• Keyboard navigation support
• eslint-plugin-jsx-a11y in CI pipeline

Testing Rules ⭐⭐⭐⭐⭐

• Test behavior not implementation details
• Mock at network level (MSW) not module level
• Co-locate test files with components

React 19 / 2026 Specific ⭐⭐⭐⭐⭐

• Use React Compiler before adding manual memo
• Server Components by default, use client only when needed
• Server Actions for form handling over API routes
• use() hook for async data over useEffect
• useOptimistic for instant UI feedback