Thanks for the article.
I have a scenario where I want to create an HOC that detects mouse events (e.g. mouseenter, mouseleave) when they occur on the WrappedComponent, then pass the WrappedComponent a special prop (e.g. componentIsHovered). I got this working with the ref callback approach you lay out here, then adding event listeners to the wrapped instance in my HOC. The problem is that this only seems to work when WrappedComponent is a class component — with functional components the ref is always null. I would just as soon place the WrappedComponent inside <div></div> tags in my HOC and carry out the event detection on that div wrapper, but the problem is that even plain div tags will style the WrappedComponent as a block element, which doesn’t work in my use case where the HOC should work on inline elements, too. Any suggestions are appreciated. Thanks again for the great article!