title: How to avoid re-render in react using useRef?
body: <p>I am creating a component to take photos and upload to a server. When I type something in the input box, the setTitle is trigger and the component is re-rendered. When this happens, the video went black. How can I avoid that the video was rendered?</p>
  
  <pre><code>function Camera() {
    console.log("Render camera");
    const [title, setTitle] = useState("");
    let videoRef = useRef(null);
    let canvasRef = useRef();
  
  // This is a custom hook for get the camera input
    const mediaStream = useUserMedia({
      audio: false,
      video: { width: 300, height: 300 }
    });
  
    if (mediaStream &amp;&amp; videoRef.current &amp;&amp; !videoRef.current.srcObject) {
      videoRef.current.srcObject = mediaStream;
    }
  
    // Stop the video stream when component is unmount
    useEffect(() =&gt; {
      return () =&gt; {
        if (mediaStream) {
          mediaStream.getTracks()[0].stop();
        }
      };
    }, [mediaStream]);
  
    const handlePostTitle = e =&gt; {
      e.preventDefault();
      setTitle(e.target.value);
    };
  
    const onCapture = async blob =&gt; {
      console.log("Upload to server");
    };
  
    return (
      &lt;form&gt;
        &lt;div&gt;
          &lt;video ref={videoRef} autoPlay muted /&gt;
          &lt;canvas ref={canvasRef} width={300} height={300} /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input
            type="text"
            name="title"
            value={title}
            onChange={handlePostTitle}
            placeholder="Title"
          /&gt;
        &lt;/div&gt;
        &lt;button
          type="submit"
          onClick={() =&gt; {
            if (canvasRef) {
              const context = canvasRef.current.getContext("2d");
              // This is for rotate the photo
              context.translate(300, 0);
              context.scale(-1, 1);
  
              context.drawImage(videoRef.current, 0, 0, 300, 300);
              canvasRef.current.toBlob(blob =&gt; onCapture(blob), "image/jpeg", 1);
              context.clearRect(0, 0, 300, 300);
            }
          }}
        &gt;
          Take photo
        &lt;/button&gt;
      &lt;/form&gt;
    );
  }
  </code></pre>
  
  <p>The full code is available at <a href="https://codesandbox.io/s/react-camera-component-with-hooks-s6pmb" rel="noreferrer">https://codesandbox.io/s/react-camera-component-with-hooks-s6pmb</a></p>