Diagon

State-management designed to minimize renders while staying out of your way and letting you write natural mutable code without sacrificing object references.

npm install diagon diagon-react # core and react bindings

Full React sandbox here and sample app here

Read the Full Documenation

diagon

✅ Object change recording
✅ Property change subscriptions
✅ Mutable coding style
✅ Object graphs with shared references
✅ Cyclic references
✅ Map, Set, and Array
✅ Time travel with undo/redo built-in
✅ Transparent to 3rd party libraries

diagon-react

✅ Re-renders components only if state changes
✅ Prevents parent re-renders
✅ Async mutation with rendering control
✅ Allows almost all your components to be wrapped in React.Memo
✅ React 18 support with useSyncExternalStore
✅ Render batching
⬛ Concurrent Mode (may work but needs testing)

Library Comparison

This comparison strives to be as accurate and as unbiased as possible. If you use any of these libraries and feel the information could be improved, feel free to suggest changes.

| | Diagon | Immer | Zustand | Zustand+Immer | | --- | --- | --- | --- | --- | | Object change tracking | ✅ | ✅ | ✅ | ✅ | | Mutable coding style | ✅ | ✅ | 🟥 | ✅ | | Object Patch Production | ✅ | ✅ | 🟥 | ✅ | | Javascript references | ✅ | 🟥 | 🟥 | 🟥 | | Object graphs with shared references | ✅ | 🟥 | 🟥 | 🟥 | | Cyclic references | ✅ | 🟥 | 🟥 | 🟥 | | Mutable state | ✅ | 🟥 | 🟥 | 🟥 | | Immutable state | 🟥 | ✅ | ✅ | ✅ | | Rich query selectors | ✅ | 🟥 | 🟥 | 🟥 | | Property change subscriptions | ✅ | 🟥 | ✅ | ✅ | | Async | ✅ | ✅ | ✅ | ✅ | | Map, Set, and Array | ✅ | ✅ | ✅ | ✅ | | Time travel with undo/redo | ✅ | ✅ | 🟥 | ✅ | | Performance* | 2x-8x | 1x | TBD | TBD |

React

| | Diagon | Zustand | | --- | --- | --- | | Re-renders components only if state changes | ✅ | ✅ | | Works with or without React Context | ✅ | ✅ | | Patch recording hooks | ✅ | 🟥 |

*Benchmark results here. Diagon performs consistenly 2x-8x faster than Immer even without Immer patch support enabled. Note, of course, that any benchmarks should simply be treated as a data point and will never be a substitue for real-world profiling. Suggestions and improvements to them are very welcome. A React benchmark on js-framework-bench pull request is pending.