Elmish React Native update / view sync problem when init has Cmd
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react-native
- Domain
- mobile
Research direction
Start with the minimal repro and compare the withReactNative setup with the working withReactBatched setup. Trace the startup Cmd from init through update and the first Render call, using the console output to check where the updated state is lost. Done means the initial render shows 1 on React Native while preserving the existing counter behavior.
Written by the indexing model from the issue text.
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:
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'
<View>
<Text>{model}</Text>
<Button title="Increment" onPress={fun _ -> dispatch Increment} />
<Button title="Decrement" onPress={fun _ -> dispatch Decrement} />
</View>
""" |> 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
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!
- Dominant language
- F#
- Stars
- 112
- Forks
- 20
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from elmish/react
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
-
Difficulty 5/5 Over a week Newbie friendliness 20/100
Similar issues
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
client-controller-update ta-bot-triage team-money-movement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
MetaMask/metamask-mobile#36594 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
mozilla-mobile/firefox-ios#35743 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
hemilabs/ui-monorepo#2323 ·
-
Needs: Author Feedback Needs: Repro
Difficulty 1/5 Under an hour Newbie friendliness 92/100
react/react-native#58621 · 1 comment ·