[BUG] 66.68~83.35ms delay when delayShow and delayHide are set to 0

[knubie]

Describe the bug
When the delayShow and delayHide props are set to 0, there is still a 66.68~83.35ms delay. At least 50ms of delay can be attributed to the debounce function wraping the handleShowTooltip and handleHideTooltip methods here:

react-tooltip/src/components/Tooltip/Tooltip.tsx

Lines 168 to 171 in 01c4a6f

	// debounce handler to prevent call twice when
	// mouse enter and focus events being triggered toggether
	const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50)
	const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50)

Removing the call to debounce drops the delay to 16.67~33.34ms. The problem is that debounce is calling the functions on the trailing edge of the delay as opposed to the leading edge. The function also accepts an immediate argument, but with the the way that debounce is implemented here, passing true for immediate just disables the function call entirely.

react-tooltip/src/utils/debounce.ts

Lines 14 to 16 in 01c4a6f

	if (!immediate) {
	func.apply(this, args)
	}

I recommend taking a look at underscore.js for how to implement debounce with the immediate param.
https://underscorejs.org/docs/modules/debounce.html

Version of Package
v5.10.5

To Reproduce

1. Create an anchor that has a hover state (used to compare with tooltip delay).
2. Add a tooltip with 0 for delayShow and delayHide.
3. Observe delay on both show and hide.

Expected behavior
The hiding and showing of the tooltip should track with the hover state of the anchor.

Screenshots
With debounce:

tooltip_delay2.mp4

tooltip_delay_list.mp4

---

Without debounce:

tooltip_no_delay.mp4

tooltip_no_delay_list.mp4

[gabrieljablonski]

Try out the beta version for #1009 [email protected].

The hiding and showing of the tooltip should track with the hover state of the anchor.

Although it might be theoretically possible (maybe doing some clever stuff with useLayoutEffect()? not sure), I don't believe it is worth the trouble. I tried recording at 200 fps just to make sure, and got around 3/4 frames, so consistent with around 1 frame at 60 fps.

[knubie]

Awesome! Much better in both my test repo and actual project. Thanks for the quick turn around @gabrieljablonski.

The additional 1-2 frame delay was not noticeable to my naked eye until I recorded it and went frame by frame, so I don't know if it's worth looking into or not unless you are looking for a challenge. 🙂

[gabrieljablonski]

Good to know, we'll leave this open until we do an official release with the fix. Thanks for reporting.

I don't know if it's worth looking into or not unless you are looking for a challenge.

Not right now haha, maybe in the future.

If you ever run into any UI libraries that are able to do stuff like this with consistent 0-frame delay, let me know so I can have a look, but I doubt it's an easy thing to achieve.

[gabrieljablonski]

Fixed on official release [email protected].

[knubie]

So I might have spoken too soon. It seems like that extra 1 frame delay is actually causing some issues. Take a look at this recording:

tooltip_1_frame_delay.mp4

What's happening is that the position of the tooltip is getting updated immediately, but the hiding of the tooltip is delayed by a frame.

I would like to dig into this more, but I'm having trouble working on the package locally. I tried using yarn link to link to a local copy of the package, but I can't seem to get any of my changes to show up in the create-react-app app.

I'd like to try and figure out why the position is getting updated before the visibility.

[gabrieljablonski]

From my experience, this seems like an entirely different problem.

I believe I've seen this exact behavior a few months ago, but I am unable to intentionally reproduce it with the more recent versions.

For now I'll keep this issue closed since I'm pretty sure it's not related, and the problem with the debounce function is definitely fixed.

If you can provide another sample project with this happening, I can take a look, and we can maybe open another issue to track this.

[danielbarion]

@knubie you can try the package locally with this doc: https://github.com/ReactTooltip/react-tooltip/blob/master/CONTRIBUTION.md

Also you can try yalc: https://github.com/wclr/yalc

Yalc simulates a local package registry, so, you just need to install Yalc globally with NPM or yarn, after this:

1. on the tooltip repository: yalc publish
2. on your project: yalc add NAME_OF_THE_PACKAGE --link (the link param will make changes into react tooltip repository be reflected to your project)
3. after every change on react-tooltip repository, you need to run yalc push to update the local package registry

PS: normally I always run yalc publish && yalc push just as double-check :)

[knubie]

Cool, thanks @danielbarion I will try that.

For now, here's the new issue: #1010