title: React state changes do not always work on mobile web
body: <p>My example works as follows:</p>
  <p>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 <strong>problems with the performance</strong>. The image is not always displayed on click. See the following GIF animations below for understanding:</p>
  <p>This is my sourcecoude:</p>
  <pre><code>  const initialState = {
      shouldObserve: false,
    };
    
    function reducer(state, action) {
      switch (action.type) {
        case &quot;observe&quot;:
          return { shouldObserve: true };
        case &quot;reset&quot;:
          return initialState;
        default:
          throw new Error();
      }
    }
  
    const [state, dispatch] = useReducer(reducer, initialState);
    
    useEffect(() =&gt; {
      // Prevent calling useEffect at first Render
      if (firstUpdate.current) {
        firstUpdate.current = false;
        return;
      }
  
      const { shouldObserve } = state;
      if (shouldObserve) {
        setTimeout(() =&gt; {
          dispatch({ type: &quot;reset&quot; });
        }, TIME_TO_OBSERVE);
      }
    }, [state]);
  </code></pre>
  <p>GIF animations:</p>
  <p>On Desktop (working well):<a href="https://i.stack.imgur.com/wZe6T.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wZe6T.gif" alt="Desktop" /></a></p>
  <p>On Mobile (not always showing the image):
  <a href="https://i.stack.imgur.com/tqUqU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tqUqU.gif" alt="Mobile" /></a></p>
  <p>Is there any way so that I can guarantee that the image is 100% (always) displayed?</p>
  <p>More information about my stack:
  I use Expo to develop an app for iOS, Android &amp; Web. The output of the Web version is React Native Web, therefore internal React is used here.</p>