Profunctor Optics for state management
summary
A concrete claim: profunctor optics let components map parent state into local views and back without actions or reducers. The demo uses useProfunctorState and pro map to convert Fahrenheit↔Celsius, then a composable todo with per-item inputs, all wired by composing lenses. Implementation targets React hooks, composes, and leverages React.memo for acceptable rendering; library is published but alpha. Performance tradeoffs and simplicity versus Redux boilerplate are shown and verified live.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 1:06What are Pro functor optics and why they seem hard
- 3:34Pro functors and state
- 5:02State management challenges
- 7:13Functors in JavaScript
- 9:44Redux and bifunctors
- 11:27Pro functors as bifunctors
- 12:50Lenses in state
- 14:13useProfunctorState for React
- 15:40Demo: Fahrenheit to Celsius
- 21:29Lens composition
- 23:18Contravariance vs covariance
- 23:40To-do app with profunctor state
- 27:46Profunctor list component
- 29:57Nested profunctor inputs
- 32:52Performance with React.memo
- 35:03Profunctor state benefits
- 36:51Origins and contributions
- 37:53Call to action
related talks
30mFunctional lenses for contemporary frameworks
30mFunctional Programming Fundamentals
30mRecomposing your React application
07mComonads on your everyday UI
17mLambdas, lambdas everywhere...
18mDestructuring state management (in React)
28mHow to use Functional Programming in your React app
35mHandling Large-Scale State Management with Context and Hooks