Web Fundamentals

Data Normalization: Organizing State for Performance

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering Path Script Loading Patterns (async/defer)Event Loop Deep Dive JavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on Interaction Import on Visibility Browser Rendering Pipeline & Layout Thrashing Rendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTML Islands Architecture React Server Components Framework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLS Performance Optimization Trade-offs Critical Resource Prioritization Code Splitting & Dynamic Imports Tree Shaking & Dead Code Elimination Lazy Loading Resource Hints: Preload, Prefetch & Preconnect Text Compression: Gzip & Brotli Image & Video Optimization Adaptive Loading List Virtualization Web Workers vs Main Thread Memory Leaks: Detection & Prevention Managing Third-Party Scripts How CDNs Work HTTP Caching Deep Dive Service Workers & Offline Strategy PWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS Explained CORS Preflight, Credentials & Misconfigurations Content Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best Practices Cookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State Caching Data Fetching Patterns Caching Strategies Pagination: Offset vs Cursor-Based Real-time Communication (WebSocket, SSE, Polling)

mediumWeb Fundamentals

Data Normalization: Organizing State for Performance

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRNormalize data into lookup tables (by ID) + relationship arrays. Enables O(1) access, single source of truth, and simple updates.

High Signal

Google

Meta

Netflix

Agoda

30-Second Answerstart every interview with this

Data normalization transforms nested, hard-to-update state into flat lookup tables (entities by ID) and relationship arrays. This pattern dramatically improves performance, maintainability, and update predictability in complex applications like Kanban boards, social feeds, and e-commerce catalogs.

Entities are books stored on shelves by ID (O(1) lookup). Relationships are index cards pointing to book IDs. When you update a book, you only change it once — every index card automatically sees the update. No need to search through every shelf.

Raw Nested Data

Normalize

Entities (by ID) + Relations (arrays of IDs)

O(1) access + Simple updates

1Normalized Structure Pattern

Use three parts: lookup tables for entities, arrays of IDs for relationships/order, and separate UI state.

2Why Normalization Matters

Eliminates deep nesting, duplication, and complex immutable updates. Provides single source of truth and O(1) access.

3Real-World Examples

Kanban boards (issues by column), social feeds (tweets + comments), product catalogs (products by category).

Key Takeaways

✓Normalization = entities by ID + relationships as ID arrays
✓Provides O(1) access and single source of truth
✓Dramatically simplifies updates and reduces bugs
✓Excellent for Kanban, feeds, catalogs, and relational data
✓Use memoized selectors for derived/nested views
✓Skip for small or mostly read-only data
✓Combine with React Query for server state

Topic Guide

On this page