Back
Web Fundamentals

Data Normalization: Organizing State for Performance

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumFrontend Architecture

Data Normalization: Organizing State for Performance

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).

PropertyNested StateNormalized State
AccessO(n) searchO(1) by ID
UpdatesComplex deep cloningSimple & predictable
Use CaseSmall/simple dataLarge, relational data
ScalabilityPoor with growthExcellent

Nested State

Access

O(n) search

Updates

Complex deep cloning

Use Case

Small/simple data

Scalability

Poor with growth

Normalized State

Access

O(1) by ID

Updates

Simple & predictable

Use Case

Large, relational data

Scalability

Excellent

Common questions

  • ›“What is data normalization and why use it?”
  • ›“How would you normalize a Kanban board state?”
  • ›“What are the trade-offs of normalized vs nested state?”
  • ›“How do you handle derived data in normalized state?”

What interviewers look for

  • Understanding of performance and maintainability benefits
  • Ability to show concrete before/after examples
  • Knowledge of lookup tables + relationship arrays
  • Awareness of when normalization is overkill

Short answer (60 sec)

Normalization stores entities in flat lookup tables by ID and relationships as arrays of IDs. This gives O(1) access, single source of truth, and simple updates — essential for large, frequently changing data.

Detailed answer (senior level)

Instead of deeply nested objects, keep entities in maps (issues, users, columns) and relationships as ID arrays (issuesByColumn, columnOrder). This eliminates duplication, makes updates trivial, and scales well. Use selectors or memoization to derive nested views when needed for rendering.

  • Over-normalizing small/simple datasets
  • Forgetting to update relationship arrays when entities change
  • Not separating UI state from normalized data
  • Deeply nesting derived data in the store
  • Poor entity identity strategy (non-unique IDs)
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
Previous TopicCaching Strategies: Client, Server & EdgeNext Topic API Design Best Practices: Pagination, Errors, Versioning & Type Safety

On this page