From e611136a7e47a936e43a9408665e60b7199be44c Mon Sep 17 00:00:00 2001
From: Sean Beyer <sean.beyer@streamlabs.com>
Date: Fri, 19 Jul 2024 15:32:29 -0700
Subject: [PATCH] Fix screen flashing when switching to editor

---
 app/components-react/hooks.ts           | 19 +++++++++++++++++++
 app/components-react/shared/Display.tsx |  4 +++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/components-react/hooks.ts b/app/components-react/hooks.ts
index f5ab9de0197c..45a54d5bd74a 100644
--- a/app/components-react/hooks.ts
+++ b/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
diff --git a/app/components-react/shared/Display.tsx b/app/components-react/shared/Display.tsx
index e4732a68a28a..dc020cf2aa6a 100644
--- a/app/components-react/shared/Display.tsx
+++ b/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;