[laszlokorte]

With lenses its possible to create component interfaces that make local and global state interchangeable. Even for focus, selection, scrollposition components use local state by default but that can replaced by a lense into a global state. This make stuff like synching two scroll positions or selectiom ranges super easy and allows for consistent manual focus management across components.

[pasteldream]

But what’s the benefit of this approach? It seems needlessly expensive, both in terms of computational overhead (walking up and down the state tree) and how much more code it requires.

I guess you gain persistence of your entire app’s state (which makes time travel debugging easier) but that’s all I can think of.

[laszlokorte]

In my experience when applying this architecture to react or svelte, the performance is quiet good, often better than classic alternative approaches (redux, many local useState)

But the main benefit is not only the persistence of the app state, but composable globally consistent state. With most state management solutions at some point you hit a wall where communicating state changes between far away components is really difficult. You need to manually manage eventlistener lifecycles, route events through the application and convert events into state changes and state changes into events, while not causing cycles or unstable feedback loops or race conditions.

With lenses the state tree is composed declaratively and locally. each component does not need to care if the parent state is locally constructed or coming from further away.

/edit: Actually using this approach you are not forced to have a single global state but instead each component can simply decide to embed its child components state into its own state or not. If all components decide to embed their children state you get a single global state. But if all components decide to not embed their children state you get only local state with no communication. But the unified Interface gives you the choice.

[dreamcompiler]

NB there is no such word as lense. Lens is a word, as is lenses. But the singular form is lens.

[wonger_]

Can you point to a code sample using lenses?

[laszlokorte]

This is a very simple example in svelte [1]

This is very detailed introduction and documetation of a lense-based architecture in react. [2] At the first glance it looks kind of overwhelming but it contains lots of examples.

This is a case study of many rather complex components. [3] The codinsteade is rather quick and dirty hacked together and at the first glance not really readable but thats kind of the point: even complex components can simply be composed locally from many small parts of requiring some global controller managing the state and keeping it consistent.

1: https://svelte.dev/playground/ea842faa235540bba43d7970ecf8ce...

2: https://github.com/calmm-js/documentation/blob/master/introd...

3. https://github.com/laszlokorte/svatom?tab=readme-ov-file