fix(BoundingClientRect): Do not call forceUpdate when not mounted

[fixes #131222617]
pivotal-cf · Sep 29, 2016 · 2251c6e · 2251c6e
1 parent bd34540
commit 2251c6e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/library/spec/pivotal-ui-react/mixins/bounding_client_rect_spec.js b/library/spec/pivotal-ui-react/mixins/bounding_client_rect_spec.js
@@ -45,6 +45,11 @@ describe('BoundingClientRect', () => {
     it('calls resize', () => {
       expect(resizeSpy).toHaveBeenCalled();
     });
+
+    it('does not do call forceUpdate if unmounted', () => {
+      ReactDOM.render(<div/>, root);
+      expect(() => MockRaf.next()).not.toThrow();
+    });
   });
 
   describe('when a window resize event is triggered', () => {

diff --git a/library/src/pivotal-ui-react/mixins/components/bounding_client_rect.js b/library/src/pivotal-ui-react/mixins/components/bounding_client_rect.js
@@ -3,6 +3,7 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 const shallowEqual = require('fbjs/lib/shallowEqual');
 import mixin from '../mixins';
+const Mounted = require('../mixins/mounted_mixin');
 const ShallowCompare = require('../mixins/shallow_compare_mixin');
 const Component = mixin(React.Component).with(ShallowCompare);
 
@@ -18,7 +19,7 @@ const properties = ['width', 'height', 'top', 'right', 'bottom', 'left'];
 
 module.exports = {
   useBoundingClientRect(Klass) {
-    return class BoundingClientRect extends Component {
+    return class BoundingClientRect extends mixin(Component).with(Mounted) {
       constructor(props, context) {
         super(props, context);
         let resolver;
@@ -32,13 +33,15 @@ module.exports = {
       }
 
       componentDidMount() {
+        super.componentDidMount();
         privates.set(this, {resize: this.resize});
         window.addEventListener('resize', this.resize);
         this.setState({container: ReactDOM.findDOMNode(this.component)});
         setImmediate(() => this.state.containerReady.resolve(this.state.container));
       }
 
       componentWillUnmount() {
+        super.componentWillUnmount();
         const {resize} = privates.get(this) || {};
         window.removeEventListener('resize', resize);
         privates.delete(this);
@@ -56,7 +59,9 @@ module.exports = {
         const {boundingClientRect: prevBoundingClientRect} = privates.get(this) || {};
         const boundingClientRect = this.getBoundingClientRect();
         const isNotEqual = property => boundingClientRect[property] !== prevBoundingClientRect[property];
-        if (!prevBoundingClientRect || properties.some(isNotEqual)) this.forceUpdate();
+        if (!prevBoundingClientRect || properties.some(isNotEqual)) {
+          this.mounted() && this.forceUpdate();
+        }
       };
 
       render() {