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(null); useEffect(updateDisplay, [p.sourceId, paddingColor]); - useEffect(refreshOutputRegion, [v.baseResolution]); + useUpdateEffect(refreshOutputRegion, [v.baseResolution]); function refreshOutputRegion() { if (!obsDisplay.current) return;