Patterns
Stay up to date on the latest design and performance patterns.
Design Patterns
Rendering Patterns
Performance Patterns
Design Patterns

- Architecture
- State
Introduction
Introduction to Design Patterns

- Architecture
- State
Singleton Pattern
Share a single global instance throughout our application

- Architecture
- State
Proxy Pattern
Intercept and control interactions to target objects

- Architecture
- State
Provider Pattern
Make data available to multiple child components

- Architecture
- State
Prototype Pattern
Share properties among many objects of the same type

- Architecture
- State
Container/Presentational Pattern
Enforce separation of concerns by separating the view from the application logic

- Architecture
- State
Observer Pattern
Use observables to notify subscribers when an event occurs

- Architecture
- State
Module Pattern
Split up your code into smaller, reusable pieces

- Architecture
- State
Mixin Pattern
Add functionality to objects or classes without inheritance

- Architecture
- State
Mediator/Middleware Pattern
Use a central mediator object to handle communication between components

- Architecture
- State
HOC Pattern
Pass reusable logic down as props to components throughout your application

- Architecture
- State
Render Props Pattern
Pass JSX elements to components through props

- Architecture
- State
Hooks Pattern
Use functions to reuse stateful logic among multiple components throughout the app

- Architecture
- State
Flyweight Pattern
Reuse existing instances when working with identical objects

- Architecture
- State
Factory Pattern
Use a factory function in order to create objects

- Architecture
- State
Compound Pattern
Create multiple components that work together to perform a single task

- Architecture
- State
Command Pattern
Decouple methods that execute tasks by sending commands to a commander
Rendering Patterns

Introduction
An introduction to Rendering Patterns

Overview of React.js
A UI library for building reusable user interface components

Client-side Rendering
Render your application's UI on the client

Server-side Rendering
Generate HTML to be rendered on the server in response to a user request

Static Rendering
Deliver pre-rendered HTML content that was generated when the site was built

Incremental Static Generation
Update static content after you have built your site

Progressive Hydration
Delay loading JavaScript for less important parts of the page

Streaming Server-Side Rendering
Generate HTML to be rendered on the server in response to a user request

React Server Components
Server Components compliment SSR, rendering to an intermediate abstraction without needing to add to the JavaScript bundle

Selective Hydration
How to use combine streaming server-side rendering with a new approach to hydration, selective hydration

Islands Architecture
The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages

Animating View Transitions
An introduction to animating page transitions using the View Transitions API and libraries
Performance Patterns

- Loading
Optimize your loading sequence
Learn how to optimize your loading sequence to improve how quickly your app is usable

- Loading
- Bundles
Static Import
Import code that has been exported by another module

- Loading
- Bundles
Dynamic Import
Import parts of your code on demand

- Loading
Import On Visibility
Load non-critical components when they are visible in the viewport

- Loading
Import On Interaction
Load non-critical resources when a user interacts with UI requiring it

- Loading
Route Based Splitting
Dynamically load components based on the current route

- Loading
- Bundles
Bundle Splitting
Split your code into small, reusable pieces

- Loading
PRPL Pattern
Optimize initial load through precaching, lazy loading, and minimizing roundtrips

- Loading
- Bundles
Tree Shaking
Reduce the bundle size by eliminating dead code

- Loading
Preload
Inform the browser of critical resources before they are discovered

- Loading
Prefetch
Fetch and cache resources that may be requested some time soon

- Loading
Optimize loading third-parties
Reduce the performance impact third-party scripts have on your site.

- Loading
List Virtualization
Optimize list performance with list virtualization

- Loading