new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/layout/components/GridItem.js
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { addons, createClass, DOM: dom, PropTypes } =
+  require("devtools/client/shared/vendor/react");
+
+const Types = require("../types");
+
+module.exports = createClass({
+
+  displayName: "GridItem",
+
+  propTypes: {
+    grid: PropTypes.shape(Types.grid).isRequired,
+    onSetGridOverlayColor: PropTypes.func.isRequired,
+    onToggleGridHighlighter: PropTypes.func.isRequired,
+  },
+
+  mixins: [ addons.PureRenderMixin ],
+
+  onGridCheckboxClick() {
+    let {
+      grid,
+      onToggleGridHighlighter,
+    } = this.props;
+
+    onToggleGridHighlighter(grid.nodeFront);
+  },
+
+  render() {
+    let { grid } = this.props;
+    let { nodeFront } = grid;
+    let { displayName, attributes } = nodeFront;
+
+    let gridName = displayName;
+
+    let idIndex = attributes.findIndex(({ name }) => name === "id");
+    if (idIndex > -1 && attributes[idIndex].value) {
+      gridName += "#" + attributes[idIndex].value;
+    }
+
+    let classIndex = attributes.findIndex(({name}) => name === "class");
+    if (classIndex > -1 && attributes[classIndex].value) {
+      gridName += "." + attributes[classIndex].value.split(" ").join(".");
+    }
+
+    return dom.li(
+      {
+        key: grid.id,
+      },
+      dom.label(
+        {},
+        dom.input(
+          {
+            type: "checkbox",
+            value: grid.id,
+            checked: grid.highlighted,
+            onChange: this.onGridCheckboxClick,
+          }
+        ),
+        gridName
+      )
+    );
+  },
+
+});

--- a/devtools/client/inspector/layout/components/GridList.js
+++ b/devtools/client/inspector/layout/components/GridList.js
@@ -1,87 +1,50 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
-const { addons, createClass, DOM: dom, PropTypes } =
+const { addons, createClass, createFactory, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
+const GridItem = createFactory(require("./GridItem"));
+
 const Types = require("../types");
 const { getStr } = require("../utils/l10n");
 
 module.exports = createClass({
 
   displayName: "GridList",
 
   propTypes: {
     grids: PropTypes.arrayOf(PropTypes.shape(Types.grid)).isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
-  onGridCheckboxClick({ target }) {
+  render() {
     let {
       grids,
       onToggleGridHighlighter,
     } = this.props;
 
-    onToggleGridHighlighter(grids[target.value].nodeFront);
-  },
-
-  render() {
-    let {
-      grids,
-    } = this.props;
-
     return dom.div(
       {
         className: "grid-container",
       },
       dom.span(
         {},
         getStr("layout.overlayGrid")
       ),
       dom.ul(
         {},
-        grids.map(grid => {
-          let { nodeFront } = grid;
-          let { displayName, attributes } = nodeFront;
-
-          let gridName = displayName;
-
-          let idIndex = attributes.findIndex(({ name }) => name === "id");
-          if (idIndex > -1 && attributes[idIndex].value) {
-            gridName += "#" + attributes[idIndex].value;
-          }
-
-          let classIndex = attributes.findIndex(({name}) => name === "class");
-          if (classIndex > -1 && attributes[classIndex].value) {
-            gridName += "." + attributes[classIndex].value.split(" ").join(".");
-          }
-
-          return dom.li(
-            {
-              key: grid.id,
-            },
-            dom.label(
-              {},
-              dom.input(
-                {
-                  type: "checkbox",
-                  value: grid.id,
-                  checked: grid.highlighted,
-                  onChange: this.onGridCheckboxClick,
-                }
-              ),
-              gridName
-            )
-          );
-        })
+        grids.map(grid => GridItem({
+          grid,
+          onToggleGridHighlighter,
+        }))
       )
     );
   },
 
 });
-

--- a/devtools/client/inspector/layout/components/moz.build
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -11,10 +11,11 @@ DevToolsModules(
     'BoxModel.js',
     'BoxModelEditable.js',
     'BoxModelInfo.js',
     'BoxModelMain.js',
     'BoxModelProperties.js',
     'ComputedProperty.js',
     'Grid.js',
     'GridDisplaySettings.js',
+    'GridItem.js',
     'GridList.js',
 )

--- a/devtools/client/inspector/layout/reducers/grids.js
+++ b/devtools/client/inspector/layout/reducers/grids.js
@@ -9,27 +9,21 @@ const {
   UPDATE_GRIDS,
 } = require("../actions/index");
 
 const INITIAL_GRIDS = [];
 
 let reducers = {
 
   [UPDATE_GRID_HIGHLIGHTED](grids, { nodeFront, highlighted }) {
-    let newGrids = grids.map(g => {
-      if (g.nodeFront == nodeFront) {
-        g.highlighted = highlighted;
-      } else {
-        g.highlighted = false;
-      }
-
-      return g;
+    return grids.map(g => {
+      return Object.assign({}, g, {
+        highlighted: g.nodeFront === nodeFront ? highlighted : false
+      });
     });
-
-    return newGrids;
   },
 
   [UPDATE_GRIDS](_, { grids }) {
     return grids;
   },
 
 };