Losing track of element with conditional rendering

Bug Report

Describe the Bug

I have this element that I need to track its dimensions and react-cool-dimensions works nicely for what I want to achieve, the problem is that this element is not always rendered and it looks like useDimensions loses track of the element reference.

If that didn’t make sense, please see below…

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://codesandbox.io/s/beautiful-haslett-sfhji
2. A red box is loaded and its dimensions are reported correctly
3. Click the TOGGLE button to switch to a blue box instead
4. The red box dimensions are now reported to be 0
5. Click the TOGGLE button to switch back to the red box
6. The red box dimensions remain 0

Expected Behavior

The red box dimensions should be correctly reported in step 6 above.

Additional Information

• The red box is resizable if it helps to test this
• There’s another third-party hook commented out where this problem does not exist

[rfgamaral]

@wellyshen I finished looking at this and found a solution that worked for me 😃

Your setRef solution above was in the right direction but I had to change that to a useCallback instead. However, that’s exactly what the observe is and I could just use that. But then things got tricky because I wanted to use the same reference within a useIntersection hook (Intersection Observer) and wasn’t able to find a solution that worked. I even ended up replacing the useIntersection hook I was using with react-cool-inview (😉), but it didn’t fix the problem I was having (I’m still keeping your hook 😄).

In the end, I realized that there was this container element that I could use with a bit of a refactor and so I did that. A solution like that (a container element around the conditional elements), prevents a lot of issues and makes things easier. If possible, of course, might not be possible for every use case, though.

---

I’d like to point out a few things I found while looking at this hook source code:

• https://github.com/wellyshen/react-cool-dimensions/blob/master/src/index.ts#L16
  • It could make sense to change the return type here to React.RefCallback<T>
• I don’t understand why you have types defined both in index.ts and react-cool-dimensions.d.ts. This is confusing and it’s usually no needed, the types are on the source already, and building a ES modules versions should output *.d.ts files for you, no need to do it manually
  • This is also valid for react-cool-inview
• This one is related to react-cool-inview but I’ll leave it here for now… root?: HTMLElement - might be worth changing this type to Element (HTMLElement extends from Element) since document.querySelector returns an Element (I’d imagine most people would use this to pick a root different from the default)

Thank you for your support and kudos on these great hooks 😃

[wellyshen]

@rfgamaral Thanks bro it really helps.