Forms Data Handling FAQ & Answers

Use multipart/form-data for file uploads with chunked upload for large files. Standard approach:

Use cursor-based pagination for large datasets, offset pagination for small datasets. Offset pagination (simple): SELECT * FROM items LIMIT 20 OFFSET 40; works for small datasets (<10k rows) but degrades at scale. Cursor pagination (fast): SELECT * FROM items WHERE id > last_id ORDER BY id LIMIT 20; uses indexed column (id, created_at) for constant O(1) performance regardless of page depth. Performance: cursor pagination 17x faster than offset at deep pages (page 1000+). When to use offset: small datasets, need page numbers (UI with 1 2 3...), direct page access required. When to use cursor: large datasets (millions of rows), real-time feeds, infinite scroll, frequently updated data (social media, logs). Implementation: return next_cursor with results, client passes cursor for next page. Example: { items: [...], next_cursor: 'eyJpZCI6MTIzfQ' }.

Use React Hook Form with Zod validation and Zustand for state management in multi-step forms. Setup: npm install react-hook-form zod @hookform/resolvers zustand. Create Zod schemas per step: const step1Schema = z.object({ email: z.string().email(), name: z.string().min(2) });. Zustand store: const useFormStore = create((set) => ({ step: 1, data: {}, setData: (data) => set({ data }), nextStep: () => set((state) => ({ step: state.step + 1 })) }));. React Hook Form per step: const { register, handleSubmit, trigger } = useForm({ resolver: zodResolver(step1Schema) });. On next: validate current step with trigger(), save to Zustand, increment step. Persist to localStorage: useEffect(() => { localStorage.setItem('formData', JSON.stringify(formData)); }, [formData]);. Best practices: (1) Validate on step change not just submit, (2) Show progress indicator, (3) Allow backward navigation, (4) Persist state across refreshes.

Use indexing and solve the N+1 query problem for large dataset optimization. N+1 problem: occurs when fetching parent records (1 query) then child records for each parent (N queries), resulting in N+1 total queries. Example: SELECT * FROM students (1 query) → SELECT * FROM courses WHERE student_id=? (100 queries for 100 students) = 101 queries. Solution: Use joins or eager loading: SELECT students., courses. FROM students JOIN courses ON students.id = courses.student_id; reduces to 1 query. Indexing: Create indexes on frequently queried columns: CREATE INDEX idx_email ON users(email);. Performance: transforms 500ms query to <1ms. Index types: B-tree (default, range queries), Hash (equality), GiST (full-text search). Best practices: (1) Index foreign keys, WHERE clause columns, ORDER BY columns, (2) Avoid over-indexing (slows writes), (3) Use EXPLAIN to analyze query plans, (4) Monitor index usage with database tools.

Implement token bucket algorithm with exponential backoff for rate limiting. Token bucket: container with fixed capacity, tokens added at constant rate (e.g., 100 tokens/minute), each request consumes 1 token, requests rejected when bucket empty. Allows bursts up to bucket capacity. Implementation: const bucket = { tokens: 100, capacity: 100, refillRate: 100/60 }; setInterval(() => { bucket.tokens = Math.min(bucket.capacity, bucket.tokens + refillRate); }, 1000);. Exponential backoff: when rate limited (429 error), retry with increasing delays: 2s, 4s, 8s, 16s. Code: const delay = Math.min(2 ** retryCount * 1000, 32000); await sleep(delay);. Check Retry-After header: if (response.status === 429) { const retryAfter = response.headers['retry-after']; await sleep(retryAfter * 1000); }. Best practices: (1) Use Redis for distributed rate limiting, (2) Implement per-user/IP limits, (3) Queue requests instead of dropping, (4) Monitor rate limit usage.

Use URL query parameters with debouncing for search with filters. URL state with useSearchParams: const [searchParams, setSearchParams] = useSearchParams(); const query = searchParams.get('q'); const category = searchParams.get('category');. Update URL: setSearchParams({ q: searchValue, category: selectedCategory });. Benefits: (1) Shareable URLs, (2) Browser back/forward works, (3) State persists on refresh. Debouncing: delay API calls until user stops typing (300-500ms): const [debouncedQuery] = useDebouncedValue(query, 300); useEffect(() => { if (debouncedQuery) { fetchResults(debouncedQuery); } }, [debouncedQuery]);. Implementation: const useDebouncedValue = (value, delay) => { const [debounced, setDebounced] = useState(value); useEffect(() => { const handler = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(handler); }, [value, delay]); return [debounced]; }. Best practices: (1) Debounce search input not API call, (2) Show loading indicator, (3) Cancel previous requests, (4) Handle empty results.

Use blue-green deployment with backward-compatible migrations for zero downtime. Blue-green approach: maintain two identical environments (Blue = current, Green = new), deploy schema changes to Green while Blue serves traffic, run migrations on Green database, switch routing to Green instantly, keep Blue as rollback option. Key principles: (1) Migrations run before application deployment, (2) Schema must support both old and new app versions during transition, (3) Use small incremental changes not big-bang migrations. Backward compatibility: Add columns as nullable first (NOT NULL breaks old app): ALTER TABLE users ADD COLUMN phone VARCHAR(20);. Deploy new app code that uses both old and new columns (dual-write pattern). Remove old column in separate migration after full deployment. Rollback strategy: Write code to use BOTH old and new columns during transition. If rollback needed, old app has no knowledge of new columns. Best practices: (1) Test migrations on copy of production data, (2) Monitor migration performance, (3) Use database replication for large migrations, (4) Implement feature flags for new schema usage.

Use react-dropzone library for HTML5-compliant drag-and-drop file uploads. Installation: npm install react-dropzone. Basic usage: import { useDropzone } from 'react-dropzone'; const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: acceptedFiles => handleUpload(acceptedFiles), accept: { 'image/*': ['.png', '.jpg', '.jpeg'] }, maxSize: 5242880 }); return <div {...getRootProps()}><input {...getInputProps()} />{isDragActive ? 'Drop files here' : 'Drag files or click to upload'}