Closed csantos-nydig closed 2 years ago
Hey! thanks for the issue! undoubtedly there are improvements we can make for many of the hooks in this respect. Would you be willing to open a PR with your proposed changes?
In the meantime, you can also mitigate this by pushing the hoverable into a component, now the h1 is re-rendered, but the others aren't because of the useHover
const MyComp = ({ theProp }) => {
const { isHovered, setIsHovered } = useState(false);
return (
<>
<span>{theProp} has nothing to do with hover below</span>
<HoverableHeader onHoverChange={setIsHovered}>Hover me</HoverableHeader>
<span>H1 is hovered?: {isHovered}</span>
</>
);
};
const HoverableHeader = (props) => {
const { isHovered, hoverProps } = useHover(props);
return <h1 {...props} />;
}
Here is a first pass on just a few hooks: https://github.com/adobe/react-spectrum/pull/3045 if you're ok with the changes we should apply those to other hooks!
🙋 Feature Request
I'd like to see if react-aria hook could be more friendly and avoid unnecessary re-renders. Specially in hooks that return event handlers. for example
useHover
/useFocus
/useFocusRing
🤔 Expected Behavior
returned event handlers such as
onFocus
/onBlur
and others to be new instances only when their dependency changes😯 Current Behavior
as soon as any of the hooks mentioned above are re-called new event handlers are returned.
💁 Possible Solution
probably introducing
useCallback
should help. Something like:🔦 Context and 💻 Examples
hoverProps
returns completely new event handlers whentheProp
changes