Immutable JavaScript Data Structures with Immer

Using immutable data structures provides many benefits, including making your code easier to reason about and less prone to bugs.

However, since JavaScript doesn’t include support for immutable data structures out of the box, you need to use a third party library. But which one to choose?

In this self-paced workshop, Immer’s creator Michel Westrate will guide you through the creation of a multi-user Gift Tracking app.

You’ll learn the basics of using Immer to handle immutable state updates, then go further into change distribution and implementing an undo/redo.

After this workshop, you’ll be ready to leverage immutable data structures in your own applications!

Course Content

Introduction to the in-depth Immer course

Capture Application Logic in Pure Functions to Create Immutable State

Simplify Deep State Updates using Immer produce

Render Immutable Data using React

Profile React Rendering and Optimize with memo to Leverage Structural Sharing

Simplify Immer Producer Functions using Currying

Produces Immutable Data and Avoid Unnecessary Creation of New Data Trees with Immer

Immutable Update State inside React components with useImmer

Return Completely New State from an Immer Producer

Avoid Accidental Returns of New State by using the void Keyword

Write Asynchronous Producers in Immer and Why You Shouldn’t

Type Immutable Immer Data with TypeScript

Update Immutable State with React useReducer through Immer

Capture Patches to Distribute Changes in App State with Immer produceWithPatches

Create a Simple WebSocket Server to Distribute Patches from Immer

Apply Patches using Immer applyPatches to Synchronize State across Clients

Create Stable Patches in Immer by updating with Id instead of Indices

Compress the Immer Patch History by Replaying Patches on a setInterval

Use Immer inversePatches to Build Undo Functionality

Use Immer Patches to Build Redo Functionality