Immutable.js provides deeply persistent immutable data structures for JavaScript, optimizing change detection in React applications.
Maps (Immutable Key-Value Objects)
import { Map } from 'immutable';
const user = Map({ name: 'Alice', age: 30 });
// Accessing values
user.get('name'); // "Alice"
user.has('age'); // true
// Immutably updating (returns new Map instance)
const updated = user.set('age', 31);
const removed = user.delete('age');
const merged = user.merge({ role: 'admin', age: 32 });
// Converting back to plain JavaScript object
user.toJS(); // { name: "Alice", age: 30 }
Lists (Immutable Arrays)
import { List } from 'immutable';
const numbers = List([1, 2, 3]);
numbers.get(0); // 1
const appended = numbers.push(4); // List [1, 2, 3, 4]
const prepended = numbers.unshift(0);// List [0, 1, 2, 3]
const filtered = numbers.filter(n => n > 1);
const mapped = numbers.map(n => n * 2);
Deep Nested Updates (fromJS, getIn, setIn)
import { fromJS } from 'immutable';
const state = fromJS({
user: {
profile: {
location: 'San Francisco'
}
}
});
// Deep access
state.getIn(['user', 'profile', 'location']); // "San Francisco"
// Deep update
const nextState = state.setIn(['user', 'profile', 'location'], 'Tokyo');
// Deep update with function
const incremented = state.updateIn(['stats', 'views'], 0, v => v + 1);