From f9ef4edf9f456f6eb34952afc89615057974cd59 Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Mon, 7 Feb 2022 01:15:32 -0600 Subject: [PATCH] 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...) --- .../lists/components/guild-list-element.tsx | 2 +- .../lists/components/message-element.tsx | 2 +- .../webapp/elements/require/react-helper.tsx | 32 +++++++++++-------- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/client/webapp/elements/lists/components/guild-list-element.tsx b/src/client/webapp/elements/lists/components/guild-list-element.tsx index e304fb9..fbba946 100644 --- a/src/client/webapp/elements/lists/components/guild-list-element.tsx +++ b/src/client/webapp/elements/lists/components/guild-list-element.tsx @@ -69,7 +69,7 @@ const GuildListElement: FC = (props: GuildListElementProp const setSelfActiveGuild = useCallback(() => { setCurrGuildId(guild.id); - }, [ guild ]); + }, [ guild.id, setCurrGuildId ]); const className = useMemo(() => currGuildId && guild.id === currGuildId ? 'guild active' : 'guild', [ guild, currGuildId ]); diff --git a/src/client/webapp/elements/lists/components/message-element.tsx b/src/client/webapp/elements/lists/components/message-element.tsx index 2fa0ae9..57ae487 100644 --- a/src/client/webapp/elements/lists/components/message-element.tsx +++ b/src/client/webapp/elements/lists/components/message-element.tsx @@ -77,7 +77,7 @@ const PreviewImageElement: FC = (props: PreviewImageEl const openImageOverlay = useCallback(() => { setOverlay(); - }, [ guild, resourceId, resourceName ]); + }, [ guild, resourceId, resourceName, setOverlay ]); return (
diff --git a/src/client/webapp/elements/require/react-helper.tsx b/src/client/webapp/elements/require/react-helper.tsx index 8e000c9..9afbee6 100644 --- a/src/client/webapp/elements/require/react-helper.tsx +++ b/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( })(); 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( 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( 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(scrollable: LoadableValueScrolling { if (loadingBelow) return; if (!isLoaded(scrollable)) return; @@ -293,7 +295,7 @@ export function useScrollableCallables(scrollable: LoadableValueScrolling) => { 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 ]; }