aleclarson/react-galaxy

Reactive rendering via immutable copies (powered by immer 👉https://goo.gl/t7gJPr), and more! -- Guide/documentation 👉https://react-galaxy.github.io

react-galaxy's Issues

Derived arrays

Currently, using derive with an array is inefficient if you want a mapped/sorted copy of the array, because previously mapped/sorted values must be reprocessed.

Adding map and sort functions would allow us to make the necessary optimizations:

import {track, revise, derive, map, sort} from 'react-galaxy'

let arr = track([ 5, 10 ])

let increment = (value: number) => value + 1
let descending = (a: number, b: number) => a > b ? -1 : 1

// The inefficient way.
let slowMapped = derive(arr, (arr) => arr.map(increment))
let slowSorted = derive(arr, (arr) => arr.slice().sort(descending))

// The proposed way.
let fastMapped = map(arr, increment)
let fastSorted = sort(arr, descending)

revise(arr, draft => {
  draft.push(0)
})

fastMapped.value // => [ 6, 11, 1 ]
fastSorted.value // => [ 10, 5, 0 ]

The slowMapped and slowSorted values are reconstructed from an empty array whenever arr is revised.

The fastMapped and fastSorted values are patched based on how arr is changed between revisions.

Other array-focused functions like filter, binarySort, and mapFilter could be added too.

Questions

1. Should these functions be in their own package, or included in the core?

Deep watch

Export a new function that is like watch(base, patchListener), but includes changes to nested reactive objects.

This would be a "heavier" function, because patches to nested objects need to be cloned so their path property is relative to the base object.

Selector that returns `nothing`

Let selectors return the nothing symbol (created by Immer, re-exported by Galaxy) to use the last selected value.

Selectors used by Read components interpret nothing to mean "skip re-rendering" (as long as all selectors return nothing or don't change). If the Read component has not rendered before, it will render null until all selectors return a non-nothing value.

This is useful when a selector wants to "bail" if some required value is missing, and skipping updates is preferred to throwing an error.