# Elmish

**Elmish** is an F# implementation of the [Elm Architecture](https://guide.elm-lang.org/architecture/) (also known as MVU — Model-View-Update). It structures UI logic around basic concepts:

* **Model**: immutable state, generally a record
* **Messages** (`Msg`): discriminated union of possible events
* `update`: function that produces a new model and optional side effects (`Cmd`)
* `view`: pure function that renders the model and dispatches messages

```mermaid
graph LR
    Model -- rendered in --> View -- dispatch a message --> Update -- compute a new model --> Model
```

**Benefits:**

* This unidirectional data flow makes state changes predictable and easy to reason about.
* The `update` function is straightforward to unit test (setting `Cmd` values aside).
* Even though commands can trigger asynchronous operations (API calls, timers, etc.), our application code remains entirely synchronous — async orchestration is handled at a higher level by the Elmish runtime.

In the F# ecosystem, Elmish is provided by the [Fable.Elmish](https://elmish.github.io/elmish/) library and integrates with React through [Feliz](https://zaid-ajaj.github.io/Feliz/).

{% hint style="warning" %}
Managing local React state (e.g. via `React.useState`) alongside an Elmish model can interfere with the purity of the MVU loop. The Elmish model is no longer the single source of truth: some state lives outside `update`, invisible to the message-driven data flow, and harder to test. Use React hooks for truly view-only concerns (e.g., toggling a UI element), but prefer the Elmish model for any state that influences business logic or data flow.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rdeneau.gitbook.io/safe-clean-architecture/front-end/elmish.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.