14 Jul 2016
Reading time ~2 minutes
The core premise for React is that UIs are simply a projection of data into a different form of data. The same input gives the same output. A simple
You can’t fit a complex UI in a single function though. It is important that UIs can be abstracted into
reusable pieces that don't leak their implementation details. Such as calling one function from another.
You also need to be able to build abstractions from the containers that
compose other abstractions.
There is actually a lot of state that is specific to an exact projection and not others.
We tend to prefer our data model to be immutable. We thread functions through that can update state as a single atom at the top.
Calling the same function over and over again is wasteful if we know that the function is pure. We can create a memoized version of a function that keeps track of the last argument and last result.
To manage the state for each item in a list we can create a Map that holds the state for a particular item.
Unfortunately, since there are so many lists of lists all over the place in UIs, it becomes quite a lot of boilerplate to manage that explicitly.
We can move the logic of extracting and passing state to a low-level function that we reuse a lot.
Once we want to memoize multiple items in a list memoization becomes much harder. You have to figure out some complex caching algorithm that balances memory usage with frequency.
Luckily, UIs tend to be fairly stable in the same position. The same position in the tree gets the same value every time. This tree turns out to be a really useful strategy for memoization.
Dreamer, Practitioner, Incomplete Front-ender