React state changes do not always work on mobile web

Question

My example works as follows:

I have a button that shows an image (via state change by dispatch from useReducer) for 400ms when clicked. After 400ms the image is hidden again and the button is visible. On the desktop browser this works quite well. But on mobile there are problems with the performance. The image is not always displayed on click. See the following GIF animations below for understanding:

This is my sourcecoude:

  const initialState = {
    shouldObserve: false,
  };
  
  function reducer(state, action) {
    switch (action.type) {
      case "observe":
        return { shouldObserve: true };
      case "reset":
        return initialState;
      default:
        throw new Error();
    }
  }

  const [state, dispatch] = useReducer(reducer, initialState);
  
  useEffect(() => {
    // Prevent calling useEffect at first Render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    const { shouldObserve } = state;
    if (shouldObserve) {
      setTimeout(() => {
        dispatch({ type: "reset" });
      }, TIME_TO_OBSERVE);
    }
  }, [state]);

GIF animations:

On Desktop (working well):

On Mobile (not always showing the image):

Is there any way so that I can guarantee that the image is 100% (always) displayed?

More information about my stack: I use Expo to develop an app for iOS, Android & Web. The output of the Web version is React Native Web, therefore internal React is used here.

score 1 · Answer 1 · answered Dec 22 '20 at 16:24

1

Maybe try something like this:

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(false);
    }, 200);
    return () => clearInterval(timer);
  }, [show]);

  return (
    <div className="App">
      <div onClick={() => setShow(true)}>
        {show ? <div>image</div> : <div>start</div>}
      </div>
    </div>
  );
}

here is a code sandbox for testing: https://codesandbox.io/s/nervous-khorana-l903t?file=/src/App.js:0-461

answered Dec 22 '20 at 16:24

Rob Terrell

2,398
1
14
36

Unfortunately I could not see any improvement. Your source code is togglin 2 divs here. Can you try to toggle image and div? If I toggle text & button it's working like expected but not with an image component – Arbnor Dec 22 '20 at 16:50
will do one sec. – Rob Terrell Dec 22 '20 at 16:51
@realarb I have inserted an image in the place of a div and it appears to work just fine. – Rob Terrell Dec 22 '20 at 16:54
may i ask how you are loading your image? I am currently testing it on the ios simulator and it works as expected. – Rob Terrell Dec 22 '20 at 16:54
I'm using Expo and I preload my image with useAssets from expo-asset. It's a normal React Native Image component – Arbnor Dec 22 '20 at 17:00
I'm wondering if it has something to do with expo and the useAssets hook. – Rob Terrell Dec 22 '20 at 17:02

React state changes do not always work on mobile web

1 Answers1