The Component Model

Lessons

1. 01 Composable Functions A composable function takes data as parameters and adds nodes to the UI tree. Data travels down, up, deep, or outside the tree; the lesson classifies eight moves with a single rule. 12 min read
2. 02 State and Remembering A composable function keeps nothing from call to call; it ties the value to be kept to a node with remember. The lesson measures that state is tied to a node and the direction of the value that goes from its owner to its reader. 10 min read
3. 03 State Hoisting State hoisting moves state to the common ancestor of the composable functions that read and write it; the value goes down and the event goes up. The lesson measures the direction of the event that goes to the owner and how the height of the owner changes the number of moves. 10 min read
4. 04 Recomposition When state changes, the platform reruns the composable functions that read the change and skips those whose inputs did not change. The lesson measures the path a change takes from its owner to its reader and how deferring the read changes the direction. 10 min read
5. 05 Side Effects While building the tree, a composable function can also touch things outside the tree: it sends a request to a service, writes a log entry, subscribes to a listener. The lesson measures these moves and shows that all of them go in the same direction, outside. 9 min read
6. 06 Immutability and Stability If the platform knows whether a value changed, it can skip during recomposition. The lesson measures that a list modified in place and an event that produces a new list go in the same direction, up, but that only one of them is observed. 7 min read