Temporarily prevent rerendering of the components

[BlackWild]

I am working on a react-native application that tries to be synced with a server but I am facing a problem.

I have a observable data that is kept synced with the server using background workers (fetches changes every 1 sec).
I am showing this data via a Slider component (https://github.com/react-native-community/react-native-slider) and I use it like this in one of my components:

const Screen = () => {
        return (
              <Slider
                value={data.value}
                minimumValue={0}
                maximumValue={100}
                onValueChange={(value) => {
                    sendValueToServer(value);
                }}
              />
        )
}
export default observer(Screen);

With this code, re-rendering works fine and the slider value changes every 1 sec on the screen; but the problem is that when the user is changing the value using the slider, the app sends the new data to the server to stay synced but the user can still be playing with the slider... and when the next fetching happens during this period, there is a glitch in the UI because the component reacts to the observerable. This problem gets worse when another client is also changing the value during this period.

What I thought can solve the problem was to temporarily stop the screen to re-render on the change of the data observable when the sliding starts and resume when it ends. Something like this:

const Screen = () => {
        return (
              <Slider
                value={data.value}
                minimumValue={0}
                maximumValue={100}
                onValueChange={(value) => {
                    sendValueToServer(value);
                }}

                onSlidingStart={() => {
                  stopAutoRerendering();
                }}
                onSlidingComplete={()=>{
                  startAutoRerendering();
                }}

              />
        )
}
export default observer(Screen);

Is there a way to achieve this in the library?

[mweststrate]

#2456

[urugator]

Can't you pause syncing the observable in onSlidingStart/Complete? Something like:

onSlidingStart={() => {
  data.sync = false
}}
onSlidingComplete={()=>{
  data.sync = true
}}
// onSyncResponse
if (data.sync) {
   data.value = response.body.value
}

Alternatively you can have 2 observables - 1 synced with server state and 1 only client side. Then you will subscribe to one or to another based on whether user is sliding or not.

<Slider
                // use correct observable
                value={data.sliding ? data.localValue : data.value}
                minimumValue={0}
                maximumValue={100}
                onValueChange={(value) => {
                    // update both server and local
                    sendValueToServer(value);
                   data.localValue = value;   
                }}
                // toggle sliding state
                onSlidingStart={() => {
                  data.sliding = true
                }}
                onSlidingComplete={()=>{
                  data.sliding = false
                }}

              />

[BlackWild]

Thank you so much for these great suggestions.

@mweststrate I didn't know about the untracked() function and I think it is what I'm looking for; I will definitely try it.

@urugator I think I can do your first solution... the syncing happens in the backend so I have to place the data.sync somewhere in my app's storage and pick it up from there when the server response comes. And I think it will work fine however I prefer not to add such control options since they may break the reliability of the backend.
Also I think the second solution will fix the problem during the sliding but will cause another problem if no new data is fetched in that period; lets say the user moves the slider in less than one sec or the server doesn't respond for a few seconds, then when the sliding is over, the slider's thumb will jump back to data.value which is another glitch.

[urugator]

Also I think the second solution

I think you just have to immediately update the value in addition to sending it to server.

onValueChange={(value) => {
  // update both server and local
  data.value = value;
  data.localValue = value;   
  sendValueToServer(value);
}}

Therefore the synced value is always up to date, unless server says otherwise on next sync - meaning the value was updated by other client and the jump is practically unavoidable.

Additionally (and regardless of solution I think) you will need to associate a timestamp with each update and ignore the server value in case it's older then the current one.

I would suggest to leave the untracked as a last option.

[mweststrate]

Rendering and side effects shouldn't be coupled. If your data updates should not trigger effects yet, it sounds like you need a view model that holds temporarily state, that only should merged back upon a certain event, or that your side effect shouldn't be fire automatically by using useEffect / autorun, but should rather happen on a specific user event instead (e.g. some onSubmit handler).

Anyway moving this to discussions as it is not a thing that will change MobX itself.