diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js
index 61bfccf0f4..3dda9912a5 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleRenderSource.js
@@ -1,19 +1,13 @@
-import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 import SourceRender from 'react-source-render'
 
 import { updateForKeys } from 'docs/src/hoc'
-import SearchExampleStandard from 'docs/src/examples/modules/Search/Types/SearchExampleStandard'
-import SearchExampleCategory from 'docs/src/examples/modules/Search/Types/SearchExampleCategory'
 import { babelConfig, externals } from './renderConfig'
 
 const resolver = (importPath, { displayName }) => {
   if (externals[importPath]) return externals[importPath]
 
-  if (_.endsWith(importPath, '/SearchExampleCategory')) return SearchExampleCategory
-  if (_.endsWith(importPath, '/SearchExampleStandard')) return SearchExampleStandard
-
   throw new Error(
     [
       'An error in resolver(), please check that import is defined, details:',
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
index fd6527c0ab..550e78317c 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleCategory.js
@@ -3,6 +3,8 @@ import faker from 'faker'
 import React, { Component } from 'react'
 import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
+const initialState = { isLoading: false, results: [], value: '' }
+
 const getResults = () =>
   _.times(5, () => ({
     title: faker.company.companyName(),
@@ -24,11 +26,7 @@ const source = _.range(0, 3).reduce((memo) => {
 }, {})
 
 export default class SearchExampleCategory extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
-
-  resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
@@ -36,7 +34,7 @@ export default class SearchExampleCategory extends Component {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
@@ -69,7 +67,9 @@ export default class SearchExampleCategory extends Component {
             category
             loading={isLoading}
             onResultSelect={this.handleResultSelect}
-            onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
             results={results}
             value={value}
             {...this.props}
@@ -78,9 +78,13 @@ export default class SearchExampleCategory extends Component {
         <Grid.Column width={8}>
           <Segment>
             <Header>State</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
             <Header>Options</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
           </Segment>
         </Grid.Column>
       </Grid>
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js
index 2d61e3953f..a4288900d5 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleCategoryCustom.js
@@ -17,6 +17,8 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
+const initialState = { isLoading: false, results: [], value: '' }
+
 const getResults = () =>
   _.times(5, () => ({
     title: faker.company.companyName(),
@@ -38,12 +40,7 @@ const source = _.range(0, 3).reduce((memo) => {
 }, {})
 
 export default class SearchExampleCategory extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
-
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
@@ -51,7 +48,7 @@ export default class SearchExampleCategory extends Component {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
index 7d5fe3d8fb..b51d19898f 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleStandard.js
@@ -3,6 +3,8 @@ import faker from 'faker'
 import React, { Component } from 'react'
 import { Search, Grid, Header, Segment } from 'semantic-ui-react'
 
+const initialState = { isLoading: false, results: [], value: '' }
+
 const source = _.times(5, () => ({
   title: faker.company.companyName(),
   description: faker.company.catchPhrase(),
@@ -11,11 +13,7 @@ const source = _.times(5, () => ({
 }))
 
 export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
-
-  resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
@@ -23,7 +21,7 @@ export default class SearchExampleStandard extends Component {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
@@ -44,7 +42,9 @@ export default class SearchExampleStandard extends Component {
           <Search
             loading={isLoading}
             onResultSelect={this.handleResultSelect}
-            onSearchChange={_.debounce(this.handleSearchChange, 500, { leading: true })}
+            onSearchChange={_.debounce(this.handleSearchChange, 500, {
+              leading: true,
+            })}
             results={results}
             value={value}
             {...this.props}
@@ -53,9 +53,13 @@ export default class SearchExampleStandard extends Component {
         <Grid.Column width={10}>
           <Segment>
             <Header>State</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(this.state, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(this.state, null, 2)}
+            </pre>
             <Header>Options</Header>
-            <pre style={{ overflowX: 'auto' }}>{JSON.stringify(source, null, 2)}</pre>
+            <pre style={{ overflowX: 'auto' }}>
+              {JSON.stringify(source, null, 2)}
+            </pre>
           </Segment>
         </Grid.Column>
       </Grid>
diff --git a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js
index 6e20fb7fb4..bdab08aaf6 100644
--- a/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js
+++ b/docs/src/examples/modules/Search/Types/SearchExampleStandardCustom.js
@@ -18,13 +18,10 @@ resultRenderer.propTypes = {
   description: PropTypes.string,
 }
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
@@ -32,7 +29,7 @@ export default class SearchExampleStandard extends Component {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js
index 0b592bec24..063b858268 100644
--- a/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js
+++ b/docs/src/examples/modules/Search/Variations/SearchExampleAligned.js
@@ -10,13 +10,10 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
@@ -24,7 +21,7 @@ export default class SearchExampleStandard extends Component {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js
index 45523550e3..89a9c8b8cc 100644
--- a/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js
+++ b/docs/src/examples/modules/Search/Variations/SearchExampleFluid.js
@@ -10,13 +10,10 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
@@ -24,7 +21,7 @@ export default class SearchExampleStandard extends Component {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)
diff --git a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js
index 4de151e1bf..73146705fd 100644
--- a/docs/src/examples/modules/Search/Variations/SearchExampleInput.js
+++ b/docs/src/examples/modules/Search/Variations/SearchExampleInput.js
@@ -10,13 +10,10 @@ const source = _.times(5, () => ({
   price: faker.finance.amount(0, 100, 2, '$'),
 }))
 
-export default class SearchExampleStandard extends Component {
-  componentWillMount() {
-    this.resetComponent()
-  }
+const initialState = { isLoading: false, results: [], value: '' }
 
-  resetComponent = () =>
-    this.setState({ isLoading: false, results: [], value: '' })
+export default class SearchExampleStandard extends Component {
+  state = initialState
 
   handleResultSelect = (e, { result }) => this.setState({ value: result.title })
 
@@ -24,7 +21,7 @@ export default class SearchExampleStandard extends Component {
     this.setState({ isLoading: true, value })
 
     setTimeout(() => {
-      if (this.state.value.length < 1) return this.resetComponent()
+      if (this.state.value.length < 1) return this.setState(initialState)
 
       const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
       const isMatch = result => re.test(result.title)