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

Open
#90 2 comments 0 reactions 0 assignees View on GitHub

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

help wanted
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from elmish/react

All issues in elmish/react

Similar issues

More Mobile Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.