--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -7,16 +7,17 @@
 const Services = require("Services");
 const {
   Component,
   createFactory,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const I = require("devtools/client/shared/vendor/immutable");
 
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
 const {
   getRecordingState,
   getRequestFilterTypes,
   getTypeFilteredRequests,
   isNetworkDetailsToggleButtonDisabled,
@@ -58,17 +59,17 @@ const DISABLE_CACHE_LABEL = L10N.getStr(
  * as well as set of filters for filtering the content.
  */
 class Toolbar extends Component {
   static get propTypes() {
     return {
       toggleRecording: PropTypes.func.isRequired,
       recording: PropTypes.bool.isRequired,
       clearRequests: PropTypes.func.isRequired,
-      requestFilterTypes: PropTypes.array.isRequired,
+      requestFilterTypes: PropTypes.object.isRequired,
       setRequestFilterText: PropTypes.func.isRequired,
       networkDetailsToggleDisabled: PropTypes.bool.isRequired,
       networkDetailsOpen: PropTypes.bool.isRequired,
       toggleNetworkDetails: PropTypes.func.isRequired,
       enablePersistentLogs: PropTypes.func.isRequired,
       togglePersistentLogs: PropTypes.func.isRequired,
       persistentLogsEnabled: PropTypes.bool.isRequired,
       disableBrowserCache: PropTypes.func.isRequired,
@@ -82,16 +83,27 @@ class Toolbar extends Component {
   constructor(props) {
     super(props);
     this.autocompleteProvider = this.autocompleteProvider.bind(this);
     this.toggleRequestFilterType = this.toggleRequestFilterType.bind(this);
     this.updatePersistentLogsEnabled = this.updatePersistentLogsEnabled.bind(this);
     this.updateBrowserCacheDisabled = this.updateBrowserCacheDisabled.bind(this);
   }
 
+  shouldComponentUpdate(nextProps) {
+    return this.props.networkDetailsOpen !== nextProps.networkDetailsOpen
+    || this.props.networkDetailsToggleDisabled !== nextProps.networkDetailsToggleDisabled
+    || this.props.persistentLogsEnabled !== nextProps.persistentLogsEnabled
+    || this.props.browserCacheDisabled !== nextProps.browserCacheDisabled
+    || this.props.recording !== nextProps.recording
+    || !I.is(this.props.requestFilterTypes, nextProps.requestFilterTypes)
+    // Filtered requests are useful only when searchbox is focused
+    || this.refs.searchbox.focused;
+  }
+
   componentDidMount() {
     Services.prefs.addObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
                                this.updatePersistentLogsEnabled);
     Services.prefs.addObserver(DEVTOOLS_DISABLE_CACHE_PREF,
                                this.updateBrowserCacheDisabled);
   }
 
   componentWillUnmount() {
@@ -134,17 +146,17 @@ class Toolbar extends Component {
       togglePersistentLogs,
       persistentLogsEnabled,
       toggleBrowserCache,
       browserCacheDisabled,
       recording,
     } = this.props;
 
     // Render list of filter-buttons.
-    let buttons = requestFilterTypes.map(([type, checked]) => {
+    let buttons = requestFilterTypes.entrySeq().toArray().map(([type, checked]) => {
       let classList = ["devtools-button", `requests-list-filter-${type}-button`];
       checked && classList.push("checked");
 
       return (
         button({
           className: classList.join(" "),
           key: type,
           onClick: this.toggleRequestFilterType,
@@ -221,16 +233,17 @@ class Toolbar extends Component {
         ),
         span({ className: "devtools-toolbar-group" },
           SearchBox({
             delay: FILTER_SEARCH_DELAY,
             keyShortcut: SEARCH_KEY_SHORTCUT,
             placeholder: SEARCH_PLACE_HOLDER,
             type: "filter",
             onChange: setRequestFilterText,
+            ref: "searchbox",
             autocompleteProvider: this.autocompleteProvider,
           }),
           button({
             className: toggleDetailButtonClassList.join(" "),
             title: networkDetailsOpen ? COLLAPSE_DETAILS_PANE : EXPAND_DETAILS_PANE,
             disabled: networkDetailsToggleDisabled,
             tabIndex: "0",
             onClick: toggleNetworkDetails,
@@ -244,17 +257,17 @@ class Toolbar extends Component {
 module.exports = connect(
   (state) => ({
     browserCacheDisabled: state.ui.browserCacheDisabled,
     filteredRequests: getTypeFilteredRequests(state),
     networkDetailsToggleDisabled: isNetworkDetailsToggleButtonDisabled(state),
     networkDetailsOpen: state.ui.networkDetailsOpen,
     persistentLogsEnabled: state.ui.persistentLogsEnabled,
     recording: getRecordingState(state),
-    requestFilterTypes: getRequestFilterTypes(state),
+    requestFilterTypes: state.filters.requestFilterTypes,
   }),
   (dispatch) => ({
     clearRequests: () => dispatch(Actions.clearRequests()),
     disableBrowserCache: (disabled) => dispatch(Actions.disableBrowserCache(disabled)),
     enablePersistentLogs: (enabled) => dispatch(Actions.enablePersistentLogs(enabled)),
     setRequestFilterText: (text) => dispatch(Actions.setRequestFilterText(text)),
     toggleBrowserCache: () => dispatch(Actions.toggleBrowserCache()),
     toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),

--- a/devtools/client/shared/components/SearchBox.js
+++ b/devtools/client/shared/components/SearchBox.js
@@ -27,16 +27,21 @@ module.exports = createClass({
 
   getInitialState() {
     return {
       value: "",
       focused: false,
     };
   },
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.value !== nextState.value ||
+      this.state.focused !== nextState.focused;
+  },
+
   componentDidMount() {
     if (!this.props.keyShortcut) {
       return;
     }
 
     this.shortcuts = new KeyShortcuts({
       window
     });