Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): optimized useMouseOverNode

Browse Source 
Manually hook into pubsub to eliminate extraneous rerenders on hook change
This commit is contained in:
psychedelicious 2023-12-31 21:53:53 +11:00 committed by Kent Keirsey
parent 6209fef63d
commit 20f497054f
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/nodes/hooks/useMouseOverNode.ts
View File

@ -1,16 +1,17 @@
import { useStore } from '@nanostores/react';
import { atom } from 'nanostores'; import { atom } from 'nanostores';
import { useCallback, useMemo } from 'react'; import { useCallback, useEffect, useState } from 'react';
export const $mouseOverNode = atom<string | null>(null); export const $mouseOverNode = atom<string | null>(null);
export const useMouseOverNode = (nodeId: string) => { export const useMouseOverNode = (nodeId: string) => {
const mouseOverNode = useStore($mouseOverNode); const [isMouseOverNode, setIsMouseOverNode] = useState(false);
const isMouseOverNode = useMemo( useEffect(() => {
() => mouseOverNode === nodeId, const unsubscribe = $mouseOverNode.subscribe((v) => {
[mouseOverNode, nodeId] setIsMouseOverNode(v === nodeId);
); });
return unsubscribe;
}, [isMouseOverNode, nodeId]);
const handleMouseOver = useCallback(() => { const handleMouseOver = useCallback(() => {
$mouseOverNode.set(nodeId); $mouseOverNode.set(nodeId);