akutruff / diagon

Mutable state management for object graphs and React

Home Page:https://diagon.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build Status Build Size Version Downloads

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.

About

Mutable state management for object graphs and React

https://diagon.dev

License:MIT License


Languages

Language:TypeScript 94.0%Language:JavaScript 3.2%Language:CSS 1.9%Language:Dockerfile 0.7%Language:HTML 0.2%