# Preferred way of doing state-management?

**URL:** <https://talk.observablehq.com/t/preferred-way-of-doing-state-management/4477>\
**Category:** Help\
**Created:** [January 19, 2021, 3:16pm UTC](https://talk.observablehq.com/t/preferred-way-of-doing-state-management/4477 "2021-01-19T15:16:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lmatteis](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lmatteis/32/4188_2.png) [@lmatteis](https://talk.observablehq.com/u/lmatteis)\
**Post date:** [January 19, 2021, 3:16pm UTC](https://talk.observablehq.com/t/preferred-way-of-doing-state-management/4477/1 "2021-01-19T15:16:53Z")

</div>

I find myself writing notebooks that expose specific UI component functionality. Think of something like a React component. Component have their own internal state that changes based on user interactions and/or external data.

In React’s runtime this is easy achievable using the infamous setState. Am curious, what is the preferred way of doing this for Observable’s runtime?

Since the main idiom of the platform is an “observable” I was thinking that any user-interaction and/or external data can be derived, so perhaps `viewof` is the solution to this?

As an example imagine I have some data that comes from an HTTP server such as `status = { userStatus: "pending" }` and after a user-interaction (perhaps a click) I want the status to be active.

I could have a new cell perhaps called `isUserStatusActive` that depends on `status` and the viewof for the click element to represent this new “observable”?

I know there’s also `mutable` for this but what is the preferred way of managing this kind of setState stuff? Thanks 🙂

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [January 19, 2021, 6:44pm UTC](https://talk.observablehq.com/t/preferred-way-of-doing-state-management/4477/2 "2021-01-19T18:44:58Z")

</div>

React style reconciliation is possible with

> **[Hello, nanomorph!](https://observablehq.com/@mbostock/hello-nanomorph)**
>
> This notebook demonstrates how to use nanomorph and Hypertext Literal to construct an Observable view of a TODO list.

> **[Hypertext literal reconciliation with nanomorph](https://observablehq.com/@tomlarkworthy/reconcile-nanomorph)**
>
> I love the hypertext literal. It is intuitive. However, naive application of it tends to invalidate state between renders leading to poor UX. React solved this problem with a reconciliation algorithm. However, React is very complicated and does not...

I do this for component local changes. (e.g. the reconcile-nanomorph example). Even though it’s much faster, it can still slow down for large grids of components though. I don’t have a satisfactory solution for grids yet. (I did not like using React in Observable. I felt the two paradigms fought in too many strange ways.)

If a notebook represents some bigger app, I tend to shove the notebook state in a single mutable object and manipulate it.

```auto
mutable appState = {... complex object ...}

```

Coz a leaf mutation doesn’t trigger, and its painful desugaring deeply, I end up doing this:

```auto
appState.todos[1].isDone = true // manipulate a leaf value, which doesn't trigger update
mutable appState = appState // a no-op but triggers an update

```

I am not sure this is the best way, but where I have currently converged to as a compromise of a few different scalability issues, I am still searching for better ways to structure complex apps.

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [January 19, 2021, 9:04pm UTC](https://talk.observablehq.com/t/preferred-way-of-doing-state-management/4477/3 "2021-01-19T21:04:27Z")

</div>

Maybe some of the answers here: [Best way to update viewof DOM from code ?](https://talk.observablehq.com/t/best-way-to-update-viewof-dom-from-code/3822) can also help