diff --git a/src/components/shared/Autocomplete.js b/src/components/shared/Autocomplete.js
index 496f03ca7f..288906a328 100644
--- a/src/components/shared/Autocomplete.js
+++ b/src/components/shared/Autocomplete.js
@@ -1,16 +1,13 @@
 // @flow
 
-import { Component, DOM as dom, createFactory } from "react";
+import React, { Component } from "react";
 import { filter } from "fuzzaldrin-plus";
 import classnames from "classnames";
 import { scrollList } from "../../utils/result-list";
 import "./Autocomplete.css";
 
-import _SearchInput from "./SearchInput";
-const SearchInput = createFactory(_SearchInput);
-
-import _ResultList from "./ResultList";
-const ResultList = createFactory(_ResultList);
+import SearchInput from "./SearchInput";
+import ResultList from "./ResultList";
 
 type State = {
   inputValue: string,
@@ -101,18 +98,21 @@ export default class Autocomplete extends Component {
     const { size } = this.props;
 
     if (results.length) {
-      return ResultList({
+      const props = {
         items: results,
         selected: this.state.selectedIndex,
         selectItem: this.props.selectItem,
         close: this.props.close,
         size,
         ref: "resultList"
-      });
+      };
+
+      return <ResultList {...props} />;
     } else if (this.state.inputValue && !results.length) {
-      return dom.div(
-        { className: "no-result-msg absolute-center" },
-        L10N.getStr("sourceSearch.noResults2")
+      return (
+        <div className="no-result-msg absolute-center">
+          {L10N.getStr("sourceSearch.noResults2")}
+        </div>
       );
     }
   }
@@ -125,27 +125,31 @@ export default class Autocomplete extends Component {
       "sourceSearch.resultsSummary1",
       searchResults.length
     );
-    return dom.div(
-      { className: classnames("autocomplete", { focused }) },
-      SearchInput({
-        query: this.state.inputValue,
-        count: searchResults.length,
-        placeholder: this.props.placeholder,
-        size,
-        showErrorEmoji: true,
-        summaryMsg,
-        onChange: e =>
-          this.setState({
-            inputValue: e.target.value,
-            selectedIndex: 0
-          }),
-        onFocus: () => this.setState({ focused: true }),
-        onBlur: () => this.setState({ focused: false }),
-        onKeyDown: this.onKeyDown,
-        handleClose: this.props.close
-      }),
-      children,
-      this.renderResults(searchResults)
+
+    const searchProps = {
+      query: this.state.inputValue,
+      count: searchResults.length,
+      placeholder: this.props.placeholder,
+      size,
+      showErrorEmoji: true,
+      summaryMsg,
+      onChange: e =>
+        this.setState({
+          inputValue: e.target.value,
+          selectedIndex: 0
+        }),
+      onFocus: () => this.setState({ focused: true }),
+      onBlur: () => this.setState({ focused: false }),
+      onKeyDown: this.onKeyDown,
+      handleClose: this.props.close
+    };
+
+    return (
+      <div className={classnames("autocomplete", { focused })}>
+        <SearchInput {...searchProps} />
+        {children}
+        {this.renderResults(searchResults)}
+      </div>
     );
   }
 }
diff --git a/src/components/shared/ResultList.js b/src/components/shared/ResultList.js
index 7db1f096bf..f391da0716 100644
--- a/src/components/shared/ResultList.js
+++ b/src/components/shared/ResultList.js
@@ -1,5 +1,5 @@
 // @flow
-import { DOM as dom, Component } from "react";
+import React, { Component } from "react";
 import classnames from "classnames";
 
 import "./ResultList.css";
@@ -35,29 +35,35 @@ export default class ResultList extends Component {
 
   renderListItem(item: ResultListItem, index: number) {
     const { selectItem, selected } = this.props;
-    return dom.li(
-      {
-        onClick: event => selectItem(event, item, index),
-        key: `${item.id}${item.value}${index}`,
-        ref: index,
-        title: item.value,
-        className: classnames("result-item", {
-          selected: index === selected
-        })
-      },
-      dom.div({ className: "title" }, item.title),
-      dom.div({ className: "subtitle" }, item.subtitle)
+    const props = {
+      onClick: event => selectItem(event, item, index),
+      key: `${item.id}${item.value}${index}`,
+      ref: index,
+      title: item.value,
+      className: classnames("result-item", {
+        selected: index === selected
+      })
+    };
+
+    return (
+      <li {...props}>
+        <div className="title">
+          {item.title}
+        </div>
+        <div className="subtitle">
+          {item.subtitle}
+        </div>
+      </li>
     );
   }
 
   render() {
     let { size, items } = this.props;
-    size = size || "";
-    return dom.ul(
-      {
-        className: `result-list ${size}`
-      },
-      items.map(this.renderListItem)
+
+    return (
+      <ul className={classnames("result-list", size)}>
+        {items.map(this.renderListItem)}
+      </ul>
     );
   }
 }
diff --git a/src/components/shared/SearchInput.js b/src/components/shared/SearchInput.js
index d603f7a2ce..2c06a34cb4 100644
--- a/src/components/shared/SearchInput.js
+++ b/src/components/shared/SearchInput.js
@@ -1,4 +1,4 @@
-import { DOM as dom, Component } from "react";
+import React, { Component } from "react";
 import { isEnabled } from "devtools-config";
 import Svg from "./Svg";
 import classnames from "classnames";
@@ -6,18 +6,23 @@ import CloseButton from "./Button/Close";
 import "./SearchInput.css";
 
 const arrowBtn = (onClick, type, className, tooltip) => {
-  return dom.button(
-    {
-      onClick,
-      type,
-      className,
-      title: tooltip,
-      key: type
-    },
-    Svg(type)
+  var props = {
+    onClick,
+    type,
+    className,
+    title: tooltip,
+    key: type
+  };
+
+  return (
+    <button {...props}>
+      {Svg(type)}
+    </button>
   );
 };
 
+arrowBtn.displayName = "ArrowButton";
+
 class SearchInput extends Component {
   displayName: "SearchInput";
   props: {
@@ -85,9 +90,10 @@ class SearchInput extends Component {
       return;
     }
 
-    return dom.div(
-      { className: "search-nav-buttons" },
-      this.renderArrowButtons()
+    return (
+      <div className="search-nav-buttons">
+        {this.renderArrowButtons()}
+      </div>
     );
   }
 
@@ -105,31 +111,31 @@ class SearchInput extends Component {
       size
     } = this.props;
 
-    return dom.div(
-      {
-        className: `search-field ${size}`
-      },
-      this.renderSvg(),
-      dom.input({
-        className: classnames({
-          empty: this.shouldShowErrorEmoji()
-        }),
-        onChange,
-        onKeyDown,
-        onKeyUp,
-        onFocus,
-        onBlur,
-        placeholder,
-        value: query,
-        spellCheck: false,
-        ref: c => (this.$input = c)
+    const inputProps = {
+      className: classnames({
+        empty: this.shouldShowErrorEmoji()
       }),
-      dom.div({ className: "summary" }, summaryMsg || ""),
-      this.renderNav(),
-      CloseButton({
-        handleClick: handleClose,
-        buttonClass: size
-      })
+      onChange,
+      onKeyDown,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      placeholder,
+      value: query,
+      spellCheck: false,
+      ref: c => (this.$input = c)
+    };
+
+    return (
+      <div className={classnames("search-field", size)}>
+        {this.renderSvg()}
+        <input {...inputProps} />
+        <div className="summary">
+          {summaryMsg || ""}
+        </div>
+        {this.renderNav()}
+        <CloseButton handleClick={handleClose} buttonClass={size} />
+      </div>
     );
   }
 }
diff --git a/src/components/tests/__snapshots__/SymbolModal.js.snap b/src/components/tests/__snapshots__/SymbolModal.js.snap
index 86420a7122..80604ecd02 100644
--- a/src/components/tests/__snapshots__/SymbolModal.js.snap
+++ b/src/components/tests/__snapshots__/SymbolModal.js.snap
@@ -9,7 +9,7 @@ exports[`SymbolModal should render 1`] = `
           <div className=\\"modal entering\\" onClick={[Function]}>
             <div className=\\"input-wrapper\\">
               <SearchInput query=\\"\\" count={2} placeholder=\\"Search functions…\\" summaryMsg=\\"1 of 2 results\\" onChange={[Function]} onKeyUp={[Function]} handleNext={[Function]} handlePrev={[Function]} handleClose={[Function]} size=\\"\\" showErrorEmoji={true}>
-                <div className=\\"search-field \\">
+                <div className=\\"search-field\\">
                   <InlineSVG className=\\"magnifying-glass\\" src=\\"<svg></svg>\\" element=\\"i\\" raw={false}>
                     <i className=\\"magnifying-glass\\" src={{...}} dangerouslySetInnerHTML={{...}} />
                   </InlineSVG>
@@ -29,11 +29,13 @@ exports[`SymbolModal should render 1`] = `
                       </InlineSVG>
                     </button>
                   </div>
-                  <div className=\\"close-btn\\" onClick={[Function]} title={[undefined]}>
-                    <InlineSVG className=\\"close\\" src=\\"<svg></svg>\\" element=\\"i\\" raw={false}>
-                      <i className=\\"close\\" src={{...}} dangerouslySetInnerHTML={{...}} />
-                    </InlineSVG>
-                  </div>
+                  <CloseButton handleClick={[Function]} buttonClass=\\"\\">
+                    <div className=\\"close-btn\\" onClick={[Function]} title={[undefined]}>
+                      <InlineSVG className=\\"close\\" src=\\"<svg></svg>\\" element=\\"i\\" raw={false}>
+                        <i className=\\"close\\" src={{...}} dangerouslySetInnerHTML={{...}} />
+                      </InlineSVG>
+                    </div>
+                  </CloseButton>
                 </div>
               </SearchInput>
             </div>