useHovering: memoize hooks
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
import _ from 'lodash';
import f, { compose, memoize } from 'lodash/fp';
import bigInt, { BigInteger } from 'big-integer';
@@ -400,11 +400,15 @@ interface useHoveringInterface {
export const useHovering = (): useHoveringInterface => {
const [hovering, setHovering] = useState(false);
- const bind = {
- onMouseOver: () => setHovering(true),
- onMouseLeave: () => setHovering(false)
- };
- return { hovering, bind };
+ const onMouseOver = useCallback(() => setHovering(true), [])
+ const onMouseLeave = useCallback(() => setHovering(false), [])
+ const bind = useMemo(() => ({
+ onMouseOver,
+ onMouseLeave,
+ }), [onMouseLeave, onMouseOver]);
+
+
+ return useMemo(() => ({ hovering, bind }), [hovering, bind]);
};
const DM_REGEX = /ship\/~([a-z]|-)*\/dm--/;
