elmish / elmish/react

Elmish React Native update / view sync problem when init has Cmd

Open
#90 2 comments 0 reactions 0 assignees View on GitHub
help wanted
Dominant language
F#
Stars
112
Forks
21
Avg merge
19h 52m
Merged PRs (30d)
1

Description

### Description

I have an React Native app (using Expo) that queues up a Cmd in the init function passed to Program.mkProgram. The Cmd does get executed in update before the first view call, but, weirdly, view gets the _previous_ state.

### Repro code

I made a minimal repro, following the counter example, modified to include a Cmd at startup:

```fs
let init () = 0, Cmd.ofMsg Increment

let update (msg:Msg) count =
console.log "IN UPDATE"
match msg with
| Increment -> count + 1, Cmd.none
| Decrement -> count - 1, Cmd.none

let Render model dispatch =
console.log $"IN RENDER, state = {model}"
JSX.jsx $"""
import {{View, Text, Button}} from 'react-native'

{model}
dispatch Increment} />
dispatch Decrement} />

""" |> toReact

Program.mkProgram init update Render
|> Program.withConsoleTrace
|> Program.withReactNative "main"
|> Program.run
```

### Expected and actual results

I expected Render to show a '1'; instead, it shows '0'.

Here's the trace:
```
LOG Initial state: 0
LOG Updated subs: []
LOG New message: "Increment"
LOG IN UPDATE
LOG Updated state: 1
LOG Updated subs: []
LOG IN RENDER, state = 0
```

This code works when run on the web (using _React Native Web_) with
```fs
Program.mkProgram init update Render
|> Program.withConsoleTrace
|> Program.withReactBatched "root"
|> Program.run
```

### Related information

* elmish version: 4.1.0
* fable-compiler version: 4.11.0
* fable-core version:4.3.0
* Operating system: Mac Sonoma 14.2.1

Thanks much!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.