react-frontend

React Frontend Development Standards

Quick Reference

Essential Hooks

// State Hook
const [count, setCount] = useState(0);
const [user, setUser] = useState<User | null>(null);

// Effect Hook
useEffect(() => {
  // Side effect
  return () => {/* cleanup */};
}, [dependencies]);

// Context Hook
const theme = useContext(ThemeContext);

// Ref Hook
const inputRef = useRef<HTMLInputElement>(null);

// Memo Hooks
const value = useMemo(() => expensiveCalc(a, b), [a, b]);
const callback = useCallback(() => doSomething(a), [a]);

State Management Decision Tree

Is state needed in >2 components?
  NO  -> Use local state (useState)
  YES -> Is it global UI state (theme, auth)?
    YES -> Use Context API
    NO  -> Is it server data (API responses)?
      YES -> Use React Query/TanStack Query
      NO  -> Complex state with many actions?
        YES -> Use Redux Toolkit or Zustand
        NO  -> Use Context API + useReducer

Component Checklist

• Use functional components with hooks
• Destructure props with TypeScript types
• Use semantic HTML elements
• Add proper ARIA labels where needed
• Memoize expensive computations with useMemo
• Memoize callbacks passed to children with useCallback
• Add loading and error states
• Clean up effects with return function
• Keep components under 300 lines

Performance Checklist

• Use React.lazy() for code splitting
• Wrap expensive components in React.memo()
• Implement virtual scrolling for long lists
• Lazy load images with loading="lazy"
• Avoid inline object/array creation in JSX

Quick Start

# Create React app with TypeScript
npx create-react-app my-app --template typescript

# Install testing library
npm install --save-dev @testing-library/react @testing-library/jest-dom

# Install React Query for server state
npm install @tanstack/react-query

# State management (choose one)
npm install zustand          # Lightweight
npm install @reduxjs/toolkit # Enterprise