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