title: React component does not re-render if there is only one state update
body: <p>I have 2 components -> a) VideoJSPlayer and b) VideosPage.</p>
  
  <p>As the name suggests, VideoJsPlayer has the video player part (using videojs) and VideosPage shows videos using VideoJsPlayer component.</p>
  
  <p>The code for each of the components is:</p>
  
  <p>a) VideoJsPlayer</p>
  
  <pre><code>import React, { useEffect } from "react";
  import videojs from "video.js";
  
  const VideoJsPlayer = props =&gt; {
    let player = null;
    let videoNode = null;
  
    // Effect for first render only.
    useEffect(() =&gt; {
      player = videojs(videoNode, props, function onPlayerReady() {
        console.log("onPlayerReady");
      });
      return function cleanup() {
        if (player) {
          player.dispose();
        }
      };
    }, []);
  
    return (
      &lt;div&gt;
        &lt;div data-vjs-player&gt;
          &lt;video ref={node =&gt; (videoNode = node)} className="video-js"&gt;&lt;/video&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default VideoJsPlayer;
  
  </code></pre>
  
  <p>b) VideosPage</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import videojs from "video.js";
  import VideoJsPlayer from "../../components/VideoJsPlayer";
  
  const VideosPage = props =&gt; {
    const [videoJsOptions, setVideoJsOptions] = useState({});
  
    // Effect for first render only.
    useEffect(() =&gt; {
      let videoJsOptionsTest = {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: "/my-video.mp4",
            type: "video/mp4"
          }
        ]
      };
  
      console.log("test");
  
      setVideoJsOptions(videoJsOptionsTest);
  
      // Cleanup on unmount.
      return function cleanup() {};
    }, []);
  
    return (
      &lt;React.Fragment&gt;
        &lt;VideoJsPlayer {...videoJsOptions} /&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default VideosPage;
  
  </code></pre>
  
  <p>When I check the URL which renders the VideosPage component, I don't see any video. I'm assuming the state (videoJsOptions) is not yet updated in VideosPage and hence I don't see the video. I can see the console log - "test" though.</p>
  
  <p>When I change the code of VideosPage to:</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import videojs from "video.js";
  import VideoJsPlayer from "../../components/VideoJsPlayer";
  
  const VideosPage = props =&gt; {
    const [videoJsOptions, setVideoJsOptions] = useState({
      autoplay: false,
      controls: true,
      sources: [
        {
          src: "/my-video.mp4",
          type: "video/mp4"
        }
      ]
    });
  
    // Effect for first render only.
    useEffect(() =&gt; {
      /*
      let videoJsOptionsTest = {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: "/my-video.mp4",
            type: "video/mp4"
          }
        ]
      };
  
      console.log("test");
  
      setVideoJsOptions(videoJsOptionsTest);
      */
  
      // Cleanup on unmount.
      return function cleanup() {};
    }, []);
  
    return (
      &lt;React.Fragment&gt;
        &lt;VideoJsPlayer {...videoJsOptions} /&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default VideosPage;
  
  </code></pre>
  
  <p>Now when I check the URL which renders the VideosPage component, I see the video.</p>
  
  <p>My assumption is - In the first case, the state update is queued and never happens. Because if it did happen, it should have re-rendered the component and I should have seen my video.</p>
  
  <p>I have also tried updating useEffect in VideoJSPlayer to run every time props changes, but it didn't help.</p>
  
  <p>Any insights on this?</p>
  
  <p>Thank you for your time.</p>
  
  <p>Here is a sandbox : <a href="https://codesandbox.io/s/charming-galileo-v8hmb?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">codesandbox</a></p>