# diagon > Mutable state management for object graphs and React Latest version **0.14.3** (published 2022-08-31) · MIT license · 0 weekly downloads ## Install ```sh npm install diagon pnpm add diagon yarn add diagon bun add diagon ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.14.3 | | Published | 2022-08-31 | | First published | 2022-08-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 149.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | akutruff | | Keywords | react, state, manager, management, store, mutable | ## Links - npm: https://www.npmjs.com/package/diagon - Repository: https://github.com/akutruff/diagon - Homepage: https://diagon.dev - Issues: https://github.com/akutruff/diagon/issues - npm.io page: https://npm.io/package/diagon ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.14.3 (latest) — 2022-08-31 - 0.14.1 — 2022-08-30 - 0.14.0 — 2022-08-30 - 0.13.0 — 2022-08-30 - 0.12.0 — 2022-08-30 - 0.11.3 — 2022-08-30 - 0.11.2 — 2022-08-30 - 0.11.1 — 2022-08-30 - 0.11.0 — 2022-08-30 - 0.10.0 — 2022-08-26 - 0.9.1 — 2022-08-24 - 0.8.2 — 2022-08-24 - 0.8.1 — 2022-08-23 - 0.7.2 — 2022-08-19 - 0.7.1 — 2022-08-19 - … 4 more at https://npm.io/package/diagon/versions ## README [![Build Status](https://img.shields.io/github/workflow/status/akutruff/diagon/tests?style=flat&colorA=000000&colorB=000000)](https://github.com/akutruff/diagon/actions?query=workflow%3Atest) [![Build Size](https://img.shields.io/bundlephobia/minzip/diagon?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=diagon) [![Version](https://img.shields.io/npm/v/diagon?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/diagon) [![Downloads](https://img.shields.io/npm/dt/diagon.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/diagon) # *Diagon* State-management designed to minimize renders while staying out of your way and letting you write natural mutable code without sacrificing object references. ```bash npm install diagon diagon-react # core and react bindings ``` Full React sandbox [here](https://stackblitz.com/github/akutruff/diagon/tree/master/apps/demo?file=src/Incrementor.tsx) and sample app [here](https://akutruff.github.io/diagon) Read the [Full Documenation](https://www.diagon.dev/docs/intro) ### `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](https://github.com/akutruff/diagon) | [Immer](https://github.com/immerjs/immer) | [Zustand](https://github.com/pmndrs/zustand) | [Zustand+Immer](https://github.com/pmndrs/zustand#sick-of-reducers-and-changing-nested-state-use-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](/docs/react/use-snap#selector-paths) | ✅ | 🟥 | 🟥 | 🟥 | | Property change subscriptions | ✅ | 🟥 | ✅ | ✅ | | Async | ✅ | ✅ | ✅ | ✅ | | Map, Set, and Array | ✅ | ✅ | ✅ | ✅ | | Time travel with undo/redo | ✅ | ✅ | 🟥 | ✅ | | Performance* | 2x-8x | 1x | TBD | TBD | ## React | | [Diagon](https://github.com/akutruff/diagon) | [Zustand](https://github.com/pmndrs/zustand) | | --- | --- | --- | | Re-renders components only if state changes | ✅ | ✅ | | Works with or without React Context | ✅ | ✅ | | Patch recording hooks | ✅ | 🟥 | \*[Benchmark results here.](https://github.com/akutruff/diagon/blob/master/apps/benchmark-cli/latest-benchmark-results.txt) 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](https://github.com/krausest/js-framework-benchmark) pull request is [pending](https://github.com/krausest/js-framework-benchmark/pull/1088). --- _Source: https://npm.io/package/diagon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._