Expert JavaScript & React Development

Write modern, performant, type-safe JavaScript and React code following current best practices.

Core Principles

• Prefer composition over inheritance - Use hooks, HOCs, and render props strategically

• Minimize re-renders - Memoize appropriately, lift state only when necessary

• Type everything - Use TypeScript for any non-trivial code

• Fail fast - Validate inputs, use error boundaries, handle edge cases

JavaScript Patterns

Modern Syntax Defaults

// Prefer const, use let only when reassignment needed const config = { timeout: 5000 }; let count = 0;

// Destructuring with defaults const { name, age = 18, ...rest } = user; const [first, second, ...remaining] = items;

// Optional chaining and nullish coalescing const value = obj?.deeply?.nested?.value ?? 'default';

// Template literals for complex strings const query = SELECT * FROM ${table} WHERE id = ${id};

Async Patterns

// Prefer async/await over raw promises async function fetchData(url) { try { const response = await fetch(url); if (!response.ok) throw new Error(HTTP ${response.status}); return await response.json(); } catch (error) { console.error('Fetch failed:', error); throw error; } }

// Parallel execution const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

// Sequential with error handling const results = await Promise.allSettled([task1(), task2(), task3()]); const successes = results.filter(r => r.status === 'fulfilled').map(r => r.value);

Advanced patterns reference

See references/modern-javascript.md for:

• Closures and module patterns

• Proxy and Reflect

• Generators and async iterators

• WeakMap/WeakSet for memory management

• Custom iterables

React Patterns

Component Structure

// Functional components with TypeScript interface ButtonProps { variant?: 'primary' | 'secondary' | 'danger'; size?: 'sm' | 'md' | 'lg'; disabled?: boolean; onClick?: () => void; children: React.ReactNode; }

export function Button({ variant = 'primary', size = 'md', disabled = false, onClick, children, }: ButtonProps) { return ( <button className={cn(styles.button, styles[variant], styles[size])} disabled={disabled} onClick={onClick} > {children} </button> ); }

Hooks Best Practices

// Custom hooks extract reusable logic function useDebounce<T>(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => { const timer = setTimeout(() => setDebouncedValue(value), delay); return () => clearTimeout(timer); }, [value, delay]);

return debouncedValue; }

// useMemo for expensive computations const sortedItems = useMemo( () => items.slice().sort((a, b) => a.name.localeCompare(b.name)), [items] );

// useCallback for stable function references const handleSubmit = useCallback( async (data: FormData) => { await submitForm(data); onSuccess(); }, [onSuccess] );

State Management Decision Tree

• Local UI state → useState

• Complex local state with actions → useReducer

• Shared state within subtree → Context + useReducer

• Global app state → Zustand, Jotai, or Redux Toolkit

• Server state (fetching/caching) → TanStack Query or SWR

Advanced React patterns reference

See references/react-patterns.md for:

• Compound components

• Render props and HOCs

• Controlled vs uncontrolled patterns

• Error boundaries

• Suspense and lazy loading

• Server components (React 19+)

TypeScript Patterns

Type Utilities

// Discriminated unions for exhaustive checking type Result<T> = { ok: true; value: T } | { ok: false; error: Error };

// Generic constraints function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; }

// Conditional types type Awaited<T> = T extends Promise<infer U> ? U : T;

// Template literal types type EventName = on${Capitalize<string>};

Strict Configuration

{ "compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true, "noImplicitReturns": true, "exactOptionalPropertyTypes": true } }

Performance Optimization

See references/performance.md for comprehensive optimization strategies.

Quick Reference

Problem Solution

Unnecessary re-renders React.memo , useMemo , useCallback

Large bundle size Code splitting, React.lazy , tree shaking

Slow lists Virtualization (@tanstack/react-virtual )

Layout thrashing useLayoutEffect , batch DOM reads

Memory leaks Cleanup in useEffect , AbortController

Critical Anti-patterns

// ❌ Creating objects/arrays in render <Component style={{ color: 'red' }} items={[1, 2, 3]} />

// ✅ Stable references const style = useMemo(() => ({ color: 'red' }), []); const items = useMemo(() => [1, 2, 3], []);

// ❌ Index as key with dynamic lists {items.map((item, i) => <Item key={i} {...item} />)}

// ✅ Stable unique keys {items.map(item => <Item key={item.id} {...item} />)}

Testing

See references/testing.md for testing strategies.

Testing Stack

• Unit tests: Vitest (fast, ESM-native)

• Component tests: React Testing Library

• E2E tests: Playwright

• Type tests: tsd or expect-type

Testing Principles

• Test behavior, not implementation

• Prefer integration tests over unit tests

• Mock at network boundary (MSW), not internal modules

• Use realistic data with factories

Project Structure

src/ ├── components/ # Reusable UI components │ └── Button/ │ ├── Button.tsx │ ├── Button.test.tsx │ └── index.ts ├── features/ # Feature-specific code │ └── auth/ │ ├── components/ │ ├── hooks/ │ ├── api.ts │ └── types.ts ├── hooks/ # Shared custom hooks ├── lib/ # Utilities and helpers ├── types/ # Shared TypeScript types └── App.tsx

Tooling Recommendations

Category Tool Notes

Build Vite Fast dev, good defaults

Linting ESLint + typescript-eslint Use flat config

Formatting Prettier Or Biome for speed

Package manager pnpm Fast, disk efficient

Runtime validation Zod Infer TS types from schemas