omniscient
immstruct
cursors
Immutable
React

uShip React Stack

example-1.js

React

Immutable

Why immutable values?

Refresher

• Easier to understand what's changing
• Performance optimizations

example-2.js

Why global state?

Refresher

• Function components are simpler than class components
• Shared state needs to live high in the tree
• Super easy to inspect, serialize, deserialize

example-2.js

React

Immutable

Problem:

Immutable, global state means passing data and update functions everywhere

example-2.1.js

React

Immutable

cursors

A cursor wraps an immutable value:

interface Cursor<ImmutableValue> {
  deref: () => ImmutableValue
  cursor: (keyName: string) => ChildValue
}

React

Immutable

cursors

It tracks: where does the wrapped value live in its parent data structure?

It updates: When the wrapped value is updated, it updates that value in the parent data structure, and calls a callback with the new parent value

example-3.js

Problem:

How do we know what the current "parent" value is? How can we inspect, serialize, deserialize it?

React

Immutable

cursors

immstruct

Atoms are containers for immutable data:

interface Atom<ImmutableValue> implements EventEmitter {
  current: ImmutableValue,
  cursor: () => Cursor<ImmutableValue> 
}

React

Immutable

cursors

immstruct

It tracks: a reference to the current root value

It updates: that reference whenever a cursor updates

example-3.1.js

It makes cursors: from the "current" reference

It emits: whenever updates happen

Opportunity:

Avoid unnecessarily rerunning render

React

Immutable

cursors

immstruct

omniscient

Factory for optimized React components

function component: (
    displayName: string,
    componentTemplate: object,
    render: (props: object) => ReactElement
) => ReactComponent

React

Immutable

cursors

immstruct

omniscient

It implements `shouldComponentUpdate` on components

example-3.2.js

It checks all props (except children) are value-equal, and skips running `render` if so