--- a/devtools/client/shared/components/VisibilityHandler.js
+++ b/devtools/client/shared/components/VisibilityHandler.js
@@ -8,40 +8,48 @@
  * Helper class to disable panel rendering when it is in background.
  *
  * Toolbox code hides the iframes when switching to another panel
  * and triggers `visibilitychange` events.
  *
  * See devtools/client/framework/toolbox.js:setIframeVisible().
  */
 
-const {
-  createClass,
-} = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+class VisibilityHandler extends Component {
+  static get propTypes() {
+    return {
+      children: PropTypes.element.isRequired
+    };
+  }
 
-const VisibilityHandler = createClass({
+  constructor(props) {
+    super(props);
 
-  displayName: "VisiblityHandler",
+    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener("visibilitychange", this.onVisibilityChange);
+  }
 
   shouldComponentUpdate() {
     return document.visibilityState == "visible";
-  },
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("visibilitychange", this.onVisibilityChange);
+  }
 
   onVisibilityChange() {
     if (document.visibilityState == "visible") {
       this.forceUpdate();
     }
-  },
-
-  componentDidMount() {
-    window.addEventListener("visibilitychange", this.onVisibilityChange);
-  },
-
-  componentWillUnmount() {
-    window.removeEventListener("visibilitychange", this.onVisibilityChange);
-  },
+  }
 
   render() {
     return this.props.children;
   }
-});
+}
 
 module.exports = VisibilityHandler;