Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Immutable Data and React - Techniques and Benefits

Meta via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Explore the power of immutable data structures in React applications during this conference talk from React.js Conf 2015. Dive into the world of persistent immutable data structures, learning how they work and their benefits in maintaining high-performance reads and writes. Discover techniques for implementing these structures in React applications using Immutable.js, a library of fully persistent immutable data structures. Gain insights into the Hash Array Mapped Trie (HAMT) and its role in simplifying complex systems. Understand how embracing immutability can solve concurrency issues, enhance JavaScript's future, and remove complexity in data management. Learn about the advantages of immutable data in React's reconciliation process, Flux stores, and memoization techniques. Explore practical applications, including easy implementation of undo functionality and improved state management. By the end of this talk, grasp how immutable data structures can significantly improve your React applications' performance and maintainability.

Syllabus

Intro
Persistent Immutable Data Structures
Structural Sharing
Directed Acyclic Graph
reTrieve
Index Trie
Implementation as Trie, Interface as Lists and Maps!
The Hash Array Mapped Trie (HAMT) is based on the simple notion of hashing a key and storing the key in a trie based on this hash value.
Simplicity is hard work. But there's a huge payoff. The person who has a genuinely simpler system is going to be able to affect the greatest change with the least work. He's going to kick your ass.
What problems does this solve anyway?
Concurrency, No locks!
Multithreading: There be dragons.
JavaScript is in trouble.
Embracing Immutability enables JavaScript's future.
Mutable objects complect Time and Value
var identity; identity = "value"; identity = "next value"
Immutable data removes complexity.
The Many Mutators Problem.
What changed?
Dirty bits
UI Framework coupling model class to view class.
Immutable change tracking
Memoization
shouldComponentUpdate()
Immutable Data is Faster
Reconciliation is pretty damn fast.
Reconciliation is slower than persistent data.
Flux stores contain mutable data.
Reconciliation is pretty damn fast?
Flux stores with immutable data!
Flux store is an identity New immutable values as time passes
Bonus: Undo is easy!
No more mutable state stockholm syndrome.
Solve problems by removing complexity.

Taught by

Meta Developers

Reviews

Start your review of Immutable Data and React - Techniques and Benefits

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.