Add styles and render as dependencies for the position calculation effect

[gabrieljablonski]

Closes #993.

A down side might be that if styles is passed inline like this:

<Tooltip
  styles={{
    attr: value
  }}
/>

since the styles object will change on every render, the tooltip will recalculate its position on every render.

That doesn't seem like a big deal, but is there a smart way to avoid this, besides forcing the user to wrap the object with useMemo() or something similar?

---

https://stackblitz.com/edit/react-ts-rtgmca

• add styles as a dependency for the calculation
• watch for attribute changes on the component passed through the render prop

[akraines]

use a structural compare?

[gabrieljablonski]

use a structural compare?

That could be an alternative, but at that point I'd rather leave it to the user to check themselves.

Btw, I thought this would fix #993 but I overlooked the fact you're using the render tooltip prop on your example, not styles. I'm working on solving the issue for that situation as well.

[gabrieljablonski]

Test with [email protected]: https://stackblitz.com/edit/react-ts-rtgmca

This solution feels a bit cumbersome with having to forward the ref to the custom component, but not sure if there are any other viable ways of achieving this.

[akraines]

Worked like a charm - thanks for fixing this so quickly!
I think that the ref approach makes a lot of sense - I was actually thinking of recommending using react-measure.
In fact, that might still be a good idea - this way you could just wrap the result of the render with a measure [or your own resize observer like you did here] and then the user wont need to pass in the ref.

[gabrieljablonski]

you could just wrap the result of the render with a measure [or your own resize observer like you did here] and then the user wont need to pass in the ref.

that's actually a great idea. I'll try it out whenever i get the time

[gabrieljablonski]

With [email protected] no ref is required: https://stackblitz.com/edit/react-ts-rtgmca

@akraines thanks for the great tips. I believe using the wrapper shouldn't be a problem in 99% of cases, we'll see what we can do if it ever causes any issues.

Also you mentioning react-measure led me to the ResizeObserver API, which I forgot existed, and is a lot more elegant to use in this case over the MutationObserver API. So thanks again!

As soon as @danielbarion reviews it, we'll merge and do an official release.

[danielbarion]

Code looks good to me :)

[akraines]

Nice and clean. Thank you very much for taking the time to fix this