fixed react-helper hooks

slight performance hit but we can work on optimizing that later
(most noticable that the avatars flicker to loading when changing channels. although this may have already been happening...)

src/client/webapp/elements/lists/components/guild-list-element.tsx

@@ -69,7 +69,7 @@ const GuildListElement: FC<GuildListElementProps> = (props: GuildListElementProp
 
 	const setSelfActiveGuild = useCallback(() => {
 		setCurrGuildId(guild.id);
-	}, [ guild ]);
+	}, [ guild.id, setCurrGuildId ]);
 
 	const className = useMemo(() => currGuildId && guild.id === currGuildId ? 'guild active' : 'guild', [ guild, currGuildId ]);
 

src/client/webapp/elements/lists/components/message-element.tsx

@@ -77,7 +77,7 @@ const PreviewImageElement: FC<PreviewImageElementProps> = (props: PreviewImageEl
 
 	const openImageOverlay = useCallback(() => {
 		setOverlay(<ImageOverlay guild={guild} resourceId={resourceId} resourceName={resourceName} />);
-	}, [ guild, resourceId, resourceName ]);
+	}, [ guild, resourceId, resourceName, setOverlay ]);
 
 	return (
 		<div className="content image" style={{ width: previewWidth, height: previewHeight }}>

src/client/webapp/elements/require/react-helper.tsx

@@ -38,7 +38,7 @@ function useShake(ms: number): [ shaking: boolean, doShake: () => void ] {
 		await Util.sleep(ms);
 		if (!isMounted.current) return;
 		setShaking(false);
-	}, [ ms ]);
+	}, [ isMounted, ms, shaking ]);
 
 	return [ shaking, doShake ];
 }
@@ -71,7 +71,8 @@ export function useOneTimeAsyncAction<T, V>(
 		})();
 
 		return () => { isMounted.current = false; };
-	}, deps);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ actionFunc, ...deps ]);
 
 	return [ value, error ];
 }
@@ -108,7 +109,8 @@ export function useAsyncCallback<ResultType>(
 			if (errorMessage) doShake();
 			setPending(false);
 		}
-	}, [ ...deps, pending, actionFunc ]);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ isMounted, pending, actionFunc, doShake, errorMessage, ...deps ]);
 
 	return [ callable, result, errorMessage, shaking ];
 }
@@ -248,7 +250,7 @@ export function useAsyncSubmitButton<ResultType>(
 		if (pending) return textMapping.pending;
 		if (complete) return textMapping.done;
 		return textMapping.start;
-	}, [ pending, complete, errorMessage ]);
+	}, [ errorMessage, textMapping.error, textMapping.pending, textMapping.done, textMapping.start, pending, complete ]);
 
 	return [ callable, text, shaking, result, errorMessage ];
 }
@@ -278,7 +280,7 @@ export function useScrollableCallables<T>(scrollable: LoadableValueScrolling<T[]
 				setLoadingAbove(false);
 			}
 		}
-	}, [ scrollable ]);
+	}, [ isMounted, loadingAbove, scrollable ]);
 	const fetchBelowCallable = useCallback(async () => {
 		if (loadingBelow) return;
 		if (!isLoaded(scrollable)) return;
@@ -293,7 +295,7 @@ export function useScrollableCallables<T>(scrollable: LoadableValueScrolling<T[]
 				setLoadingBelow(false);
 			}
 		}
-	}, [ scrollable ]);
+	}, [ isMounted, loadingBelow, scrollable ]);
 
 	const onScrollCallable = useCallback(async (event: UIEvent<HTMLElement>) => {
 		const scrollTop = event.currentTarget.scrollTop;
@@ -369,14 +371,14 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(ref: RefObjec
 		if (ref.current.contains(event.target as Node)) return;
 		// context menu is fired on mouse-down so no need to do special checks.
 		actionFunc();
-	}, [ ref ]);
+	}, [ actionFunc, ref ]);
 
 	const handleKeyDown = useCallback((event: KeyboardEvent) => {
 		if (!ref.current) return;
 		if (event.key !== 'Escape') return;
 
 		actionFunc();
-	}, [ ref ]);
+	}, [ actionFunc, ref ]);
 
 	useEffect(() => {
 		document.addEventListener('click', handleClickOutside);
@@ -404,7 +406,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(ref: RefObjec
 		return () => {
 			document.removeEventListener('contextmenu', handleContextMenu);
 		};
-	}, [ handleClickOutside ]);
+	}, [ handleContextMenu ]);
 
 	useEffect(() => {
 		document.addEventListener('keydown', handleKeyDown);
@@ -433,7 +435,8 @@ export function useAlignment(
 		if (!relativeTo) throw new ShouldNeverHappenError('invalid alignment props');
 		ElementsUtil.alignContextElement(rootRef.current, relativeTo, alignment);
 		setAligned(true);
-	}, [ rootRef, relativeToRef, relativeToPos, ...realignDeps ]);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ rootRef, relativeToRef, relativeToPos, alignment, ...realignDeps ]);
 
 	const className = useMemo(() => baseClassName + (aligned ? ' aligned' : ''), [ baseClassName, aligned ]);
 
@@ -456,6 +459,8 @@ export function useContextMenu(
 	const close = useCallback(() => {
 		setIsOpen(false);
 	}, []);
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const contextMenu = useMemo(() => createContextMenu(close), [ close, createContextMenu, ...createContextMenuDeps ]);
 
 	const toggle = useCallback(() => {
@@ -463,7 +468,7 @@ export function useContextMenu(
 	}, [ contextMenu ]);
 	const open = useCallback(() => {
 		setIsOpen(true);
-	}, [ contextMenu ]);
+	}, []);
 
 	return [ isOpen ? contextMenu : null, toggle, close, open, isOpen ];
 }
@@ -482,7 +487,7 @@ export function useContextClickContextMenu(
 
 	const createContextMenuWithRelativeToPos = useCallback(
 		(close: () => void) => createContextMenu(alignment, relativeToPos, close),
-		[ alignment, relativeToPos ]
+		[ alignment, createContextMenu, relativeToPos ]
 	);
 
 	const [ contextMenu, _toggle, _close, open ] = useContextMenu(createContextMenuWithRelativeToPos, createContextMenuDeps);
@@ -508,6 +513,7 @@ export function useContextHover(
 
 	const contextHover = useMemo(
 		() => createContextHover(),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ createContextHover, ...createContextHoverDeps ]
 	);
 
@@ -555,7 +561,7 @@ export function useDocumentDropTarget(
 				setName={setName}
 			/>
 		);
-	}, [ dragEnabled, message, setBuff, setName ]);
+	}, [ closeDragOverlay, dragEnabled, message, setBuff, setName ]);
 
 	return [ dropTarget ];
 }