useReducer manages state with reducer patterns like Redux but locally scoped. When state updates depend on previous state or involve multiple sub-values, reducers are clearer than multiple useState calls. The reducer function takes current state and a

API versioning allows backward-incompatible changes without breaking existing clients. I version via URL path (/api/v1/posts) for simplicity and explicit version selection. Each version namespace has its own controllers and serializers. Routes use nam

Async validation checks constraints that require server communication, like username availability or email uniqueness. React Hook Form's validate option accepts async functions that return error messages or true. I debounce async validators to avoid e

Custom validators encapsulate complex validation rules that go beyond built-in validators. I create validator classes for business logic like email format verification, slug uniqueness, or credit card validation. Custom validators inherit from ActiveM

Cross-Origin Resource Sharing (CORS) allows browsers to make requests from React apps hosted on different domains than the Rails API. The rack-cors gem configures CORS middleware with fine-grained control over origins, methods, and headers. In develop

React.memo prevents unnecessary re-renders of components when props haven't changed. I wrap components in memo when they're expensive to render or receive the same props frequently. The component only re-renders if props differ via shallow comparison.

N+1 queries are the most common Rails performance problem—loading associations in loops causes exponential database queries. The Bullet gem detects N+1s in development and suggests fixes. It monitors queries and alerts when you should use includes, pr

Accessible apps support keyboard-only navigation with proper focus management. Tab order should follow visual order, and all interactive elements must be keyboard accessible. I use tabIndex={0} to make custom controls focusable and tabIndex={-1} for p

Fixtures and factories both create test data, but suit different needs. Fixtures load YAML files into the database before tests, providing fast, consistent data. I use fixtures for static reference data like countries or categories. Factories (via Fac

Portals render components outside their parent DOM hierarchy while maintaining React's component tree for context and events. I use portals for modals, tooltips, and dropdowns that need to escape overflow: hidden containers or z-index stacking context

Migrations evolve database schema safely across environments. I follow strict conventions: one logical change per migration, descriptive names, reversible operations. Using change instead of up/down enables automatic rollback for most operations. For

React Suspense handles async operations declaratively, showing fallback UI while data loads. With frameworks like Relay or React Query's experimental Suspense mode, components throw promises when data isn't ready, triggering the nearest Suspense bound