Rewrite <HoverLayer> using Hooks #10
Conversation
| return ( | ||
| <> | ||
| {detectionAreas} | ||
| </> |
There was a problem hiding this comment.
Maybe we don't need the Fragment, just return detectionAreas as previous code?
There was a problem hiding this comment.
This is necessary for Typescript because if detectionAreas were not wrapped by Fragment, <HoverLayer> would not be a legit FunctionComponent.
There was a problem hiding this comment.
Interesting 🤕 I just tried directly return detectionAreas and the typescript complier / tslint didn't have any error / warning for this.
| }, | ||
| throttleTime, | ||
| ), | ||
| [], |
There was a problem hiding this comment.
I think the second args should be [handleHover, setHoveredPosAndIndex, throttleTime]. The throttled function should change if one of these props changes. See the note part of useCallback doc.
There was a problem hiding this comment.
Great catch. Thanks for finding this out 😃
| event.persist(); | ||
| updatePosition(dataIndex, event); | ||
| }, | ||
| [], |
There was a problem hiding this comment.
Same as the comment above (L63).
| updatePosition.cancel(); | ||
| clearHovering(); | ||
| }, | ||
| [], |
There was a problem hiding this comment.
Same as the comment above with one more clearHovering argument in input arrays.
|
@chenesan Thanks for reminding me about the correct usage of |
Purpose
This PR follows the rewrites using Hooks (#8, #9). It converts as a functional component.
In addition, to better reuses the process of requesting animation frame, it adds a new custom effect
useAnimationFrameof which users can simply call itsrequestWindowAnimationFrame, and it will cancel the animation frame when the component is going to be unmounted.Changes