fix(reobserve): Prevent unnecessary reobserve() calls when re-rendering

In some cases it's possible that the target node changed and there's a need to reobserve it.
When that happens a flag was stale and subsequent re-renders cause reobserve() to be called always.
This fix sets the flag value back to false on the second re-render so that this behavior gets resetted.

Author: Rendez

src/IntersectionObserver.js

@@ -129,6 +129,8 @@ export default class IntersectionObserver extends React.Component {
         if (this.renderedTarget && target && this.renderedTarget !== target) {
             this.unobserve();
             this.targetChanged = true;
+        } else {
+            this.targetChanged = false;
         }
         this.target = target;
     };

src/__tests__/IntersectionObserver.spec.js

@@ -263,6 +263,40 @@ describe('update', () => {
 
         expect(spy).not.toBeCalled();
     });
+
+    test('should not reobserve on a second render after root changed the first time', () => {
+        const component = (
+            <IntersectionObserver onChange={noop}>
+                <span />
+            </IntersectionObserver>
+        );
+        let called = false;
+        const tree = renderer.create(component, {
+            createNodeMock() {
+                if (called) {
+                    return target;
+                }
+                called = true;
+                return Object.assign({ id: 2 }, target);
+            },
+        });
+        const instance = tree.getInstance();
+        const spy = jest.spyOn(instance, 'reobserve');
+
+        tree.update(
+            <IntersectionObserver onChange={noop}>
+                <div />
+            </IntersectionObserver>,
+        );
+
+        tree.update(
+            <IntersectionObserver onChange={noop}>
+                <div key="forcesRender" />
+            </IntersectionObserver>,
+        );
+
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
 });
 
 describe('callback', () => {