import React, { FC, useEffect, useCallback } from 'react'

import Emitter from '../../emitter'
import Crowi from 'client/util/Crowi'
import Icon from 'components/Common/Icon'

interface Props {
  crowi: Crowi
}

const NavigationDrawerOpener: FC<Props> = props => {
  const openMenu = useCallback(() => {
    Emitter.emit('sideMenuHandle', true)
  }, [])

  const closeMenu = useCallback(() => {
    Emitter.emit('sideMenuHandle', false)
  }, [])

  useEffect(() => {
    Emitter.on('closeSideMenu', () => {
      closeMenu()
    })
  })

  return (
    <a onClick={openMenu}>
      <Icon name="menu" />
    </a>
  )
}

export default NavigationDrawerOpener

// This is the root component for #search-page

import React from 'react'

import Emitter from '../../emitter'
import Crowi from 'client/util/Crowi'
import Icon from 'components/Common/Icon'

interface Props {
  crowi: Crowi
}

interface State {
  menuOpen: boolean
}

export default class NavigationDrawerOpener extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)

    this.state = {
      menuOpen: false,
    }

    this.handleMenuOpen = this.handleMenuOpen.bind(this)

    Emitter.on('closeSideMenu', () => {
      this.closeMenu()
    })
  }

  handleMenuOpen() {
    const toMenuOpen = !this.state.menuOpen
    Emitter.emit('sideMenuHandle', toMenuOpen)
    this.setState({ menuOpen: toMenuOpen })
  }

  closeMenu() {
    const toMenuOpen = false
    Emitter.emit('sideMenuHandle', toMenuOpen)
    this.setState({ menuOpen: toMenuOpen })
  }

  render() {
    return (
      <a onClick={this.handleMenuOpen}>
        <Icon name="menu" />
      </a>
    )
  }
}

--- 
+++ 
@@ -1,6 +1,4 @@
-// This is the root component for #search-page
-
-import React from 'react'
+import React, { FC, useEffect, useCallback } from 'react'
 
 import Emitter from '../../emitter'
 import Crowi from 'client/util/Crowi'
@@ -10,42 +8,26 @@
   crowi: Crowi
 }
 
-interface State {
-  menuOpen: boolean
+const NavigationDrawerOpener: FC<Props> = props => {
+  const openMenu = useCallback(() => {
+    Emitter.emit('sideMenuHandle', true)
+  }, [])
+
+  const closeMenu = useCallback(() => {
+    Emitter.emit('sideMenuHandle', false)
+  }, [])
+
+  useEffect(() => {
+    Emitter.on('closeSideMenu', () => {
+      closeMenu()
+    })
+  })
+
+  return (
+    <a onClick={openMenu}>
+      <Icon name="menu" />
+    </a>
+  )
 }
 
-export default class NavigationDrawerOpener extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {
-      menuOpen: false,
-    }
-
-    this.handleMenuOpen = this.handleMenuOpen.bind(this)
-
-    Emitter.on('closeSideMenu', () => {
-      this.closeMenu()
-    })
-  }
-
-  handleMenuOpen() {
-    const toMenuOpen = !this.state.menuOpen
-    Emitter.emit('sideMenuHandle', toMenuOpen)
-    this.setState({ menuOpen: toMenuOpen })
-  }
-
-  closeMenu() {
-    const toMenuOpen = false
-    Emitter.emit('sideMenuHandle', toMenuOpen)
-    this.setState({ menuOpen: toMenuOpen })
-  }
-
-  render() {
-    return (
-      <a onClick={this.handleMenuOpen}>
-        <Icon name="menu" />
-      </a>
-    )
-  }
-}
+export default NavigationDrawerOpener
Migrate to Stateful Functional Component