diff --git a/backend/attachRendererFiber.js b/backend/attachRendererFiber.js
index 007bc9b48d..f086c9e401 100644
--- a/backend/attachRendererFiber.js
+++ b/backend/attachRendererFiber.js
@@ -201,6 +201,8 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
     var nodeType = null;
     var name = null;
     var text = null;
+    var needHideBySymbol = null;
+    var needHideByParensInName = null;
 
     // Profiler data
     var actualDuration = null;
@@ -225,6 +227,8 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
         publicInstance = fiber.stateNode;
         props = fiber.memoizedProps;
         state = fiber.memoizedState;
+        needHideBySymbol = typeof Symbol === 'function' && fiber.type[Symbol.for('react.devtools.hide')];
+        needHideByParensInName = /\(.*\)/.test(name);
         if (publicInstance != null) {
           context = publicInstance.context;
           if (context && Object.keys(context).length === 0) {
@@ -414,6 +418,8 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
       updater,
       publicInstance,
       memoizedInteractions,
+      needHideBySymbol,
+      needHideByParensInName,
 
       // Profiler data
       actualDuration,
diff --git a/backend/getData.js b/backend/getData.js
index cccb4fa1e4..596a010e83 100644
--- a/backend/getData.js
+++ b/backend/getData.js
@@ -165,6 +165,14 @@ function getData(internalInstance: Object): DataType {
     };
   }
 
+  const needHideBySymbol = nodeType === 'Composite' &&
+    typeof Symbol === 'function' &&
+    typeof type === 'function' &&
+    type[Symbol.for('react.devtools.hide')];
+  const needHideByParensInName = nodeType === 'Composite' &&
+    typeof type === 'function' &&
+    name && /\(.*\)/.test(name);
+
   // $FlowFixMe
   return {
     nodeType,
@@ -180,6 +188,8 @@ function getData(internalInstance: Object): DataType {
     text,
     updater,
     publicInstance,
+    needHideBySymbol,
+    needHideByParensInName,
   };
 }
 
diff --git a/backend/types.js b/backend/types.js
index 569bd4c1c8..d5a478d055 100644
--- a/backend/types.js
+++ b/backend/types.js
@@ -35,6 +35,8 @@ export type DataType = {
   text: ?string,
   updater: ?(CompositeUpdater | NativeUpdater),
   publicInstance: ?Object,
+  needHideBySymbol: boolean,
+  needHideByParensInName: boolean
 };
 
 // This type is entirely opaque to the backend.
diff --git a/frontend/Breadcrumb.js b/frontend/Breadcrumb.js
index 5d92698f0f..278349ed3d 100644
--- a/frontend/Breadcrumb.js
+++ b/frontend/Breadcrumb.js
@@ -19,7 +19,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 const decorate = require('./decorate');
 
-type BreadcrumbPath = Array<{id: ElementID, node: Object}>;
+type BreadcrumbPath = Array<{id: ElementID, node: Object, isDimmedNode: boolean}>;
 
 type Props = {
   hover: (string, boolean) => void;
@@ -70,13 +70,9 @@ class Breadcrumb extends React.Component<Props, State> {
 
     return (
       <ul style={containerStyle(theme)}>
-        {path.map(({ id, node }) => {
+        {path.map(({ id, node, isDimmedNode }) => {
           const isSelected = id === selected;
-          const style = itemStyle(
-            isSelected,
-            node.get('nodeType'),
-            theme,
-          );
+          const style = itemStyle({isSelected, nodeType: node.get('nodeType'), isDimmedNode}, theme);
 
           return (
             <li
@@ -127,7 +123,10 @@ const containerStyle = (theme: Theme) => ({
   overflow: 'auto',
 });
 
-const itemStyle = (isSelected: boolean, nodeType: string, theme: Theme) => {
+const itemStyle = (
+  {isSelected, nodeType, isDimmedNode}: {isSelected: boolean, nodeType: string, isDimmedNode: boolean},
+  theme: Theme
+) => {
   let color;
   if (isSelected) {
     color = theme.state02;
@@ -146,6 +145,8 @@ const itemStyle = (isSelected: boolean, nodeType: string, theme: Theme) => {
     MozUserSelect: 'none',
     userSelect: 'none',
     display: 'inline-block',
+    opacity: isDimmedNode ? 0.8 : 1,
+    fontStyle: isDimmedNode ? 'italic' : undefined,
   };
 };
 
@@ -153,9 +154,11 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
   var path = [];
   var current = store.breadcrumbHead;
   while (current) {
+    const node = store.get(current);
     path.unshift({
       id: current,
-      node: store.get(current),
+      node: node,
+      isDimmedNode: store.isDimmedNode(node),
     });
     current = store.skipWrapper(store.getParent(current), true);
   }
@@ -163,7 +166,7 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
 }
 
 module.exports = decorate({
-  listeners: () => ['breadcrumbHead', 'selected'],
+  listeners: () => ['breadcrumbHead', 'selected', 'hidingStyleChange', 'hideSymbolChange', 'hideByParensInNameChange'],
   props(store, props) {
     return {
       select: id => store.selectBreadcrumb(id),
diff --git a/frontend/Node.js b/frontend/Node.js
index f82fff87d2..68d9906a36 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -32,6 +32,8 @@ type PropsType = {
   isBottomTagSelected: boolean,
   searchRegExp: ?RegExp,
   wrappedChildren: ?Array<any>,
+  isHiddenNode: boolean,
+  isDimmedNode: boolean,
   onHover: (isHovered: boolean) => void,
   onHoverBottom: (isHovered: boolean) => void,
   onContextMenu: () => void,
@@ -195,6 +197,7 @@ class Node extends React.Component<PropsType, StateType> {
       wrappedChildren,
     } = this.props;
     const {isWindowFocused} = this.state;
+    const isDimmed = this.props.isDimmedNode;
 
     if (!node) {
       return 'Node was deleted';
@@ -202,7 +205,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     let children = node.get('children');
 
-    if (node.get('nodeType') === 'Wrapper') {
+    if (node.get('nodeType') === 'Wrapper' || this.props.isHiddenNode) {
       return children.map(child =>
         <WrappedNode key={child} id={child} depth={depth}/>
       );
@@ -297,7 +300,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     // Single-line tag (collapsed / simple content / no content)
     if (!children || typeof children === 'string' || !children.length) {
-      const jsxSingleLineTagStyle = jsxTagStyle(inverted, nodeType, theme);
+      const jsxSingleLineTagStyle = jsxTagStyle({inverted, nodeType, isDimmed}, theme);
       const content = children;
       const isCollapsed = content === null || content === undefined;
       return (
@@ -328,7 +331,7 @@ class Node extends React.Component<PropsType, StateType> {
       );
     }
 
-    const jsxCloseTagStyle = jsxTagStyle(inverted && (isBottomTagSelected || collapsed), nodeType, theme);
+    const jsxCloseTagStyle = jsxTagStyle({inverted: inverted && (isBottomTagSelected || collapsed), nodeType, isDimmed}, theme);
     const closeTag = (
       <Fragment>
         &lt;/
@@ -342,7 +345,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     const headInverted = inverted && (!isBottomTagSelected || collapsed);
 
-    const jsxOpenTagStyle = jsxTagStyle(inverted && (!isBottomTagSelected || collapsed), nodeType, theme);
+    const jsxOpenTagStyle = jsxTagStyle({inverted: inverted && (!isBottomTagSelected || collapsed), nodeType, isDimmed}, theme);
     const head = (
       <div style={sharedHeadStyle} {...headEvents}>
         <span
@@ -418,7 +421,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id];
+    return [props.id, 'hidingStyleChange', 'hideSymbolChange', 'hideByParensInNameChange'];
   },
   props(store, props) {
     var node = store.get(props.id);
@@ -435,6 +438,8 @@ var WrappedNode = decorate({
       isBottomTagHovered: store.isBottomTagHovered,
       hovered: store.hovered === props.id,
       searchRegExp: props.searchRegExp,
+      isHiddenNode: store.isHiddenNode(node),
+      isDimmedNode: store.isDimmedNode(node),
       onToggleCollapse: e => {
         e.preventDefault();
         store.toggleCollapse(props.id);
@@ -510,7 +515,10 @@ const headStyle = ({
   };
 };
 
-const jsxTagStyle = (inverted: boolean, nodeType: string, theme: Theme) => {
+const jsxTagStyle = (
+  {inverted, nodeType, isDimmed}: {inverted: boolean, nodeType: string, isDimmed: boolean},
+  theme: Theme
+) => {
   let color;
   if (inverted) {
     color = theme.state02;
@@ -524,6 +532,8 @@ const jsxTagStyle = (inverted: boolean, nodeType: string, theme: Theme) => {
 
   return {
     color,
+    opacity: isDimmed ? 0.8 : 1,
+    fontStyle: isDimmed ? 'italic' : undefined,
   };
 };
 
diff --git a/frontend/PreferencesPanel.js b/frontend/PreferencesPanel.js
index 58d810bc2e..b0ec1d1861 100644
--- a/frontend/PreferencesPanel.js
+++ b/frontend/PreferencesPanel.js
@@ -22,6 +22,9 @@ const ThemeEditor = require('./Themes/Editor/Editor');
 const Hoverable = require('./Hoverable');
 const TraceUpdatesFrontendControl = require('../plugins/TraceUpdates/TraceUpdatesFrontendControl');
 const ColorizerFrontendControl = require('../plugins/Colorizer/ColorizerFrontendControl');
+const HidingEffectFrontendControl = require('../plugins/HidingComponents/EffectFrontendControl');
+const HidingSymbolFrontendControl = require('../plugins/HidingComponents/SymbolFrontendControl');
+const HidingDisplayNamedFrontendControl = require('../plugins/HidingComponents/DisplayNamedFrontendControl');
 
 import type {Theme} from './types';
 
@@ -118,6 +121,18 @@ class PreferencesPanel extends React.Component<Props, State> {
               <EditIcon />
             </EditButton>
           </div>
+          <h4 style={styles.header}>Hiding components</h4>
+          <div style={styles.preference}>
+            <HidingEffectFrontendControl value="none" text="No hiding" />
+            <HidingEffectFrontendControl value="hide" text="Hiding" />
+            <HidingEffectFrontendControl value="dim" text="Dimming"/>
+          </div>
+          <div style={styles.preference}>
+            <HidingSymbolFrontendControl />
+          </div>
+          <div style={styles.preference}>
+            <HidingDisplayNamedFrontendControl />
+          </div>
           <div style={styles.buttonBar}>
             <button
               onClick={hide}
diff --git a/frontend/SettingsCheckbox.js b/frontend/SettingsCheckbox.js
index 773199b43b..40d658790f 100644
--- a/frontend/SettingsCheckbox.js
+++ b/frontend/SettingsCheckbox.js
@@ -45,8 +45,8 @@ class SettingsCheckbox extends React.Component<Props, State> {
   }
 
   componentDidMount(): void {
-    if (!this.props.state !== this._defaultState) {
-      this.props.onChange(this._defaultState);
+    if (!this._defaultState.equals(this.props.state)) {
+      this.props.onChange(this._defaultState.merge(this.props.state));
     }
   }
 
diff --git a/frontend/SettingsRadio.js b/frontend/SettingsRadio.js
new file mode 100644
index 0000000000..7dd4f78c59
--- /dev/null
+++ b/frontend/SettingsRadio.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+
+const {sansSerif} = require('./Themes/Fonts');
+
+
+type StateValue = any;
+
+type Props = {
+  state: StateValue,
+  value: StateValue,
+  text: string,
+  onChange: (v: StateValue) => void,
+};
+
+class SettingsRadio extends React.Component<Props> {
+  _toggle: (b: boolean) => void;
+
+  constructor(props: Props) {
+    super(props);
+    this._toggle = this._toggle.bind(this);
+  }
+
+  render() {
+    var {state, value} = this.props;
+    return (
+      <label style={styles.container} onClick={this._toggle} tabIndex={0}>
+        <input
+          style={styles.radio}
+          type="radio"
+          checked={state === value}
+          readOnly={true}
+        />
+        <span>{this.props.text}</span>
+      </label>
+    );
+  }
+
+  _toggle() {
+    var {onChange, value} = this.props;
+    onChange(value);
+  }
+}
+
+var styles = {
+  radio: {
+    pointerEvents: 'none',
+    marginRight: '0.5rem',
+  },
+  container: {
+    WebkitUserSelect: 'none',
+    cursor: 'default',
+    display: 'inline-block',
+    outline: 'none',
+    fontFamily: sansSerif.family,
+    userSelect: 'none',
+    marginRight: '0.5rem',
+  },
+};
+
+module.exports = SettingsRadio;
diff --git a/frontend/Store.js b/frontend/Store.js
index f85c3828c8..6699b65553 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -11,6 +11,8 @@
 'use strict';
 
 var {EventEmitter} = require('events');
+// TODO $FlowFixMe - it is not documented API? any alternatives?
+var {flushSync} = require('react-dom');
 var {Map, Set, List, Record} = require('immutable');
 var assign = require('object-assign');
 var { copy } = require('clipboard-js');
@@ -24,8 +26,12 @@ const {get, set} = require('../utils/storage');
 
 const LOCAL_STORAGE_TRACE_UPDATES_KEY = 'traceUpdates';
 
+const LOCAL_STORAGE_PREFERENCES_HIDING_STYLE = 'preferences:hidingStyle';
+const LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL = 'preferences:hideSymbol';
+const LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED = 'preferences:hideByParensInName';
+
 import type Bridge from '../agent/Bridge';
-import type {ControlState, DOMEvent, ElementID, Theme} from './types';
+import type {ControlState, DOMEvent, ElementID, HidingStyle, Theme} from './types';
 import type {Snapshot} from '../plugins/Profiler/ProfilerTypes';
 
 type ListenerFunction = () => void;
@@ -111,6 +117,9 @@ class Store extends EventEmitter {
   selectedTab: string;
   selected: ?ElementID;
   themeStore: ThemeStore;
+  hidingStyle: HidingStyle;
+  hideSymbol: ControlState;
+  hideByParensInName: ControlState;
   breadcrumbHead: ?ElementID;
   snapshotQueue: Array<Snapshot> = [];
   // an object describing the capabilities of the inspected runtime.
@@ -141,10 +150,13 @@ class Store extends EventEmitter {
     this.isBottomTagSelected = false;
     this.searchText = '';
     this.capabilities = {};
-    this.traceupdatesState = null;
-    this.colorizerState = null;
+    this.traceupdatesState = {enabled: false};
+    this.colorizerState = {enabled: false};
     this.refreshSearch = false;
     this.themeStore = themeStore;
+    this.hidingStyle = get(LOCAL_STORAGE_PREFERENCES_HIDING_STYLE, 'none');
+    this.hideSymbol = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, false)};
+    this.hideByParensInName = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, false)};
 
     // for debugging
     window.store = this;
@@ -210,7 +222,7 @@ class Store extends EventEmitter {
     }
     this._eventQueue.push(event);
     if (!this._eventTimer) {
-      this._eventTimer = setTimeout(() => this.flush(), 50);
+      this._eventTimer = setTimeout(flushSync, 50, () => this.flush());
     }
     return true;
   }
@@ -220,10 +232,11 @@ class Store extends EventEmitter {
       clearTimeout(this._eventTimer);
       this._eventTimer = null;
     }
-    this._eventQueue.forEach(evt => {
+    var eventQueue = this._eventQueue;
+    this._eventQueue = [];
+    eventQueue.forEach(evt => {
       EventEmitter.prototype.emit.call(this, evt);
     });
-    this._eventQueue = [];
   }
 
   // Public actions
@@ -381,6 +394,36 @@ class Store extends EventEmitter {
     this.emit('theme');
   }
 
+  changeHidingStyle(state: HidingStyle) {
+    this.hidingStyle = state;
+    set(LOCAL_STORAGE_PREFERENCES_HIDING_STYLE, state);
+    this.emit('hidingStyleChange');
+    this._reselect();
+  }
+
+  changeHideSymbol(state: ControlState) {
+    this.hideSymbol = state;
+    set(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, state.enabled);
+    this.emit('hideSymbolChange');
+    this._reselect();
+  }
+
+  changeHideByParensInName(state: ControlState) {
+    this.hideByParensInName = state;
+    set(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, state.enabled);
+    this.emit('hideByParensInNameChange');
+    this._reselect();
+  }
+
+  _reselect() {
+    var selected = this.selected;
+    if (!selected) {
+      return;
+    }
+    this._revealDeep(selected);
+    this.select(this.skipWrapper(selected), true);
+  }
+
   showPreferencesPanel() {
     this.preferencesPanelShown = true;
     this.emit('preferencesPanelShown');
@@ -523,7 +566,7 @@ class Store extends EventEmitter {
       var node = this.get(id);
       var nodeType = node.get('nodeType');
 
-      if (nodeType !== 'Wrapper' && nodeType !== 'Native') {
+      if (nodeType !== 'Wrapper' && nodeType !== 'Native' && !this.isHiddenNode(node)) {
         return id;
       }
       if (nodeType === 'Native' && (!up || this.get(this._parents.get(id)).get('nodeType') !== 'NativeWrapper')) {
@@ -548,6 +591,22 @@ class Store extends EventEmitter {
     }
   }
 
+  isHiddenNode(node: DataType) {
+    return this.hidingStyle === 'hide' &&
+      (
+        this.hideSymbol.enabled && node.get('needHideBySymbol') ||
+        this.hideByParensInName.enabled && node.get('needHideByParensInName')
+      );
+  }
+
+  isDimmedNode(node: DataType) {
+    return this.hidingStyle === 'dim' &&
+      (
+        this.hideSymbol.enabled && node.get('needHideBySymbol') ||
+        this.hideByParensInName.enabled && node.get('needHideByParensInName')
+      );
+  }
+
   off(evt: string, fn: ListenerFunction): void {
     this.removeListener(evt, fn);
   }
diff --git a/frontend/Themes/Preview.js b/frontend/Themes/Preview.js
index 9e6875779c..0eaa7d8fb6 100644
--- a/frontend/Themes/Preview.js
+++ b/frontend/Themes/Preview.js
@@ -125,6 +125,7 @@ const fauxStore = {
   setHover: noop,
   selectBottom: noop,
   selectTop: noop,
+  isHiddenNode: noop,
 };
 
 const panelStyle = (theme: Theme) => ({
diff --git a/frontend/types.js b/frontend/types.js
index d9aade5982..1e324552bf 100644
--- a/frontend/types.js
+++ b/frontend/types.js
@@ -76,6 +76,8 @@ export type ControlState = {
   enabled: boolean,
 } & Record;
 
+export type HidingStyle = 'none' | 'hide' | 'dim';
+
 /**
  * A theme is a color template used throughout devtools.
  * All devtools coloring is declared by themes, with one minor exception: status colors.
diff --git a/plugins/HidingComponents/DisplayNamedFrontendControl.js b/plugins/HidingComponents/DisplayNamedFrontendControl.js
new file mode 100644
index 0000000000..f84230f2dd
--- /dev/null
+++ b/plugins/HidingComponents/DisplayNamedFrontendControl.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var decorate = require('../../frontend/decorate');
+var SettingsCheckbox = require('../../frontend/SettingsCheckbox');
+
+var Wrapped = decorate({
+  listeners() {
+    return ['hideByParensInNameChange'];
+  },
+  props(store) {
+    return {
+      state: store.hideByParensInName,
+      text: 'Hide HOC\'s with parens in name',
+      onChange: state => store.changeHideByParensInName(state),
+    };
+  },
+}, SettingsCheckbox);
+
+module.exports = Wrapped;
diff --git a/plugins/HidingComponents/EffectFrontendControl.js b/plugins/HidingComponents/EffectFrontendControl.js
new file mode 100644
index 0000000000..126efe46be
--- /dev/null
+++ b/plugins/HidingComponents/EffectFrontendControl.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var decorate = require('../../frontend/decorate');
+var SettingsRadio = require('../../frontend/SettingsRadio');
+
+var Wrapped = decorate({
+  listeners() {
+    return ['hidingStyleChange'];
+  },
+  props(store) {
+    return {
+      state: store.hidingStyle,
+      onChange: state => store.changeHidingStyle(state),
+    };
+  },
+}, SettingsRadio);
+
+module.exports = Wrapped;
diff --git a/plugins/HidingComponents/SymbolFrontendControl.js b/plugins/HidingComponents/SymbolFrontendControl.js
new file mode 100644
index 0000000000..92adbe990b
--- /dev/null
+++ b/plugins/HidingComponents/SymbolFrontendControl.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var decorate = require('../../frontend/decorate');
+var SettingsCheckbox = require('../../frontend/SettingsCheckbox');
+
+var Wrapped = decorate({
+  listeners() {
+    return ['hideSymbolChange'];
+  },
+  props(store) {
+    return {
+      state: store.hideSymbol,
+      text: 'Hide components with truthy `Symbol.for(\'react.devtools.hide\')` property',
+      onChange: state => store.changeHideSymbol(state),
+    };
+  },
+}, SettingsCheckbox);
+
+module.exports = Wrapped;
diff --git a/test/example/target.js b/test/example/target.js
index a99b498298..b9f53a74fa 100644
--- a/test/example/target.js
+++ b/test/example/target.js
@@ -505,6 +505,10 @@ function wrapWithHoc(Component) {
       return <div><Component /></div>;
     }
   }
+  HigherOrderComponent.displayName = 'HigherOrderComponent(Nested)';
+  if (typeof Symbol === 'function') {
+    HigherOrderComponent[Symbol.for('react.devtools.hide')] = true;
+  }
 
   return HigherOrderComponent;
 }