Infinite rerenders when using ref={(el) => observe(el)}

[Ricardo Amaral]

Bug Report

Describe the Bug

This hook continually rerenders components when using ref={(el) => observe(el)}. The problem does not exist when using ref={observe}.

I need to use ref={(el) => observe(el)} because I need to observe a specific element with both useInView and useDimensions, so in the end I'll have something like this:

ref={(el) => {
    observeInView(el);
    observeDimensions(el)
}}

I've started having this issue with react-cool-dimensions v2.x.x, and react-cool-inview v2.x.x. Previously, I simply shared the same ref between both hooks, and everything was much easier to handle.

How to Reproduce

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

1. Go to https://codesandbox.io/s/loving-wave-zlokm?file=/src/App.js
2. Click on Console on the browser preview
3. Observe "Rendering..." being printed continuously...

Expected Behavior

It should render only when ìnView` changes.

Your Environment

• Device: Desktop PC
• OS: Windows 10
• Browser: Firefox v89
• Version: v2.0.3

[Welly Shen]

@rfgamaral Oops! It has been fixed in v2.0.4, thank you mate!