Fix screen flashing when switching to editor

app/components-react/hooks.ts

@@ -99,6 +99,25 @@ export function useRenderInterval(callback: () => void, delay: number, condition
   }, [tick, condition]);
 }
 
+/**
+ * Sets up a useEffect scenario that will only fire after the first render
+ * instead of the normal case that fires during the first render in addition to after
+ * dependency changes.
+ * @param callback Function to handle the desired effect
+ * @param deps If present, effect will only activate if the values in the list change
+ */
+export function useUpdateEffect(callback: React.EffectCallback, deps?: React.DependencyList) {
+  const hasRendered = useRef(false);
+
+  useEffect(() => {
+    if (hasRendered.current) {
+      callback();
+    } else {
+      hasRendered.current = true;
+    }
+  }, deps);
+}
+
 /**
  * Useful for firing off an async request when the component mounts, but
  * the result will be automatically discarded if the component unmounts

app/components-react/shared/Display.tsx

@@ -5,6 +5,8 @@ import { Display as OBSDisplay } from '../../services/video';
 import { TDisplayType } from 'services/settings-v2/video';
 import uuid from 'uuid/v4';
 import { useRealmObject } from 'components-react/hooks/realm';
+import { useUpdateEffect } from 'components-react/hooks';
+
 interface DisplayProps {
   id?: string;
   sourceId?: string;
@@ -43,7 +45,7 @@ export default function Display(props: DisplayProps) {
   const displayEl = useRef<HTMLDivElement>(null);
 
   useEffect(updateDisplay, [p.sourceId, paddingColor]);
-  useEffect(refreshOutputRegion, [v.baseResolution]);
+  useUpdateEffect(refreshOutputRegion, [v.baseResolution]);
 
   function refreshOutputRegion() {
     if (!obsDisplay.current) return;