Library
Learning Patterns
UI/UX Design

Learning Patterns

Lydia Hallie & Addy Osmani 2022 12 references

Modern JavaScript and React design patterns, rendering strategies, and performance optimization techniques from Lydia Hallie and Addy Osmani's Learning Patterns.

javascript react design-patterns web-performance rendering-patterns next-js core-web-vitals

Overview

The Core Framework

  • Classical design patterns must be re-evaluated for modern JS/React — many are obsolete or replaced by Hooks and ES modules
  • Pattern selection spans three layers: design (code organization), rendering (content delivery), performance (user experience optimization)
  • React Hooks are the universal simplifier — replacing HOCs, render props, container components, and class-based state
  • Rendering is a spectrum (CSR → SSR → SSG → iSSG → Islands), not a binary choice — pick based on metric priorities
  • Always measure before and after — some "optimizations" cause regressions

Quick Lookup

Situation Do This Avoid This
Sharing state across tree Provider Pattern (Context API) Prop drilling through intermediaries
Cross-cutting logic (logging, auth) Custom Hook HOC wrapper (unless uniform enforcement needed)
Global singleton state ES module + Object.freeze Singleton class pattern
Content-heavy site, rare updates SSG or iSSG Full SSR on every request
Interactive app, personalized data CSR or SSR SSG (stale content risk)
Mostly static, few interactive widgets Islands Architecture Full-page hydration
Large list (1000+ items) List virtualization (react-window) Rendering all DOM nodes
Heavy 3P widget (chat, auth) Facade pattern + import on interaction Eager loading in initial bundle
Late-discovered critical resource <link rel="preload"> Relying on natural discovery
Anticipated future navigation <link rel="prefetch"> Over-prefetching (bandwidth waste)

The Key Insight

"There is such a gap between how patterns were designed for classical OOP and how JavaScript actually works that many patterns become anti-patterns when applied without adaptation." — Hallie & Osmani, Introduction

References

1

bundle optimization case study

Third-party libraries ship features you never use, and those unused features still cost parse time, hydration time, and transfer bytes. The "features…

2

Code Splitting and Loading Strategies

Shift JavaScript cost from initial page load to moment-of-need. Static imports force every module into the critical bundle regardless of whether the…

Performance Patterns
code-splitting dynamic-import lazy-loading +2
HIGH
3

component patterns

Four component patterns address the same root tension -- separating data logic from rendering -- but at different structural levels:

4

Patterns Re-evaluated for Modern JavaScript

Classical design patterns (Gang of Four, etc.) must be re-evaluated for the modern JavaScript and React ecosystem. Many traditional OOP patterns are…

Introduction
design-patterns react-hooks javascript-architecture
CRITICAL
5

Design Patterns Catalog (Modern JS)

Classical design patterns were invented for languages lacking first-class functions, closures, and module systems. Modern JavaScript has all three.…

Design Patterns
design-patterns singleton proxy +4
HIGH
6

hydration strategies

Standard SSR decouples First Contentful Paint from Time to Interactive: the server delivers HTML fast, but the entire JS bundle must load and execute…

7

Implementation Playbook

Pattern selection, rendering strategy, and performance optimization are not independent decisions. Each layer constrains the others: component…

All
implementation decision-tree optimization-sequence +1
HIGH
8

Web Performance Metrics and Measurement

Every rendering strategy is a tradeoff across a fixed set of performance metrics, not a universal upgrade. JS bundle size is the single most…

Rendering Patterns, Performance Case Study
core-web-vitals lighthouse performance-measurement +1
HIGH
9

The Hooks Revolution: Replacing Legacy Patterns

React Hooks reorganize component logic by concern rather than by lifecycle phase. Class components forced unrelated logic into shared lifecycle…

Hooks Pattern
react hooks useState +6
CRITICAL
10

The Rendering Spectrum: CSR to Islands

Every rendering pattern is a trade-off across performance KPIs, not an upgrade over another. The rendering location (server vs. client) and timing…

Rendering Patterns
rendering CSR SSR +9
CRITICAL
11

Resource Loading Optimization

Every resource optimization exists on a spectrum between "Too little Too late" and "Too much Too soon." Loading resources too eagerly steals…

Performance Patterns
prpl preload prefetch +3
HIGH
12

Rules of Thumb

Pattern selection must be driven by measurable performance impact and practical need, not theoretical elegance. Patterns are time-tested templates,…

All
heuristics decision-rules quick-reference
CRITICAL