Avoid duplicate renders when getting new props

Author: Aljullu

package.json

@@ -16,6 +16,8 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.18.1",
     "eslint-loader": "^1.9.0",
     "eslint-plugin-babel": "^4.1.2",

src/components/LazyLoadImage.jsx

@@ -9,21 +9,12 @@ class LazyLoadImage extends React.Component {
     this.state = {
       visible: false
     };
-
-    this.previousBoundingBox = {
-      bottom: -1,
-      top: -1
-    };
   }
 
   componentDidMount() {
     this.updateVisibility();
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.updateVisibility(nextProps.scrollPosition);
-  }
-
   getRelevantProps(nextProps) {
     const keys = Object.keys(nextProps);
 
@@ -81,24 +72,15 @@ class LazyLoadImage extends React.Component {
       this.props.afterLoad();
     }
 
-    if (this.placeholder) {
-      const boundingBox = this.getPlaceholderBoundingBox();
-
-      if (this.previousBoundingBox.bottom !== boundingBox.bottom ||
-          this.previousBoundingBox.left !== boundingBox.left ||
-          this.previousBoundingBox.right !== boundingBox.right ||
-          this.previousBoundingBox.top !== boundingBox.top) {
-        this.updateVisibility();
-      }
-    }
+    this.updateVisibility();
   }
 
-  updateVisibility(scrollPosition = this.props.scrollPosition) {
+  updateVisibility() {
     if (this.state.visible) {
       return;
     }
 
-    if (!this.isImageInViewport(scrollPosition)) {
+    if (!this.isImageInViewport()) {
       return;
     }
 
@@ -109,12 +91,12 @@ class LazyLoadImage extends React.Component {
     });
   }
 
-  isImageInViewport(scrollPosition) {
+  isImageInViewport() {
     if (!this.placeholder) {
       return false;
     }
 
-    const { threshold } = this.props;
+    const { scrollPosition, threshold } = this.props;
     const boundingBox = this.getPlaceholderBoundingBox(scrollPosition);
     const viewport = {
       bottom: scrollPosition.y + window.innerHeight,
@@ -123,8 +105,6 @@ class LazyLoadImage extends React.Component {
       top: scrollPosition.y
     };
 
-    this.previousBoundingBox = boundingBox;
-
     return Boolean(viewport.top - threshold <= boundingBox.bottom &&
       viewport.bottom + threshold >= boundingBox.top &&
       viewport.left - threshold <= boundingBox.right &&

src/components/LazyLoadImage.spec.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactTestUtils from 'react-dom/test-utils';
-import assert from 'assert';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 
 import LazyLoadImage from './LazyLoadImage.jsx';
 
+configure({ adapter: new Adapter() });
+
 const {
   scryRenderedDOMComponentsWithClass,
   scryRenderedDOMComponentsWithTag
@@ -17,7 +20,7 @@ describe('LazyLoadImage', function() {
       scrollPosition = {x: 0, y: 0},
       style = {}
     } = {}) {
-    return ReactTestUtils.renderIntoDocument(
+    return mount(
       <LazyLoadImage
         afterLoad={afterLoad}
         beforeLoad={beforeLoad}
@@ -40,21 +43,21 @@ describe('LazyLoadImage', function() {
       width: 0
     });
 
-    lazyLoadImage.placeholder.getBoundingClientRect = myMock;
+    lazyLoadImage.instance().placeholder.getBoundingClientRect = myMock;
 
-    lazyLoadImage.componentWillReceiveProps({
+    lazyLoadImage.setProps({
       scrollPosition: {x: offsetX, y: offsetY}
     });
   }
 
   function expectImages(wrapper, numberOfImages) {
-    const img = scryRenderedDOMComponentsWithTag(wrapper, 'img');
+    const img = scryRenderedDOMComponentsWithTag(wrapper.instance(), 'img');
 
     expect(img.length).toEqual(numberOfImages);
   }
 
   function expectPlaceholders(wrapper, numberOfPlaceholders, placeholderClassName = 'lazy-load-image-placeholder') {
-    const placeholder = scryRenderedDOMComponentsWithClass(wrapper, placeholderClassName);
+    const placeholder = scryRenderedDOMComponentsWithClass(wrapper.instance(), placeholderClassName);
 
     expect(placeholder.length).toEqual(numberOfPlaceholders);
   }