diff --git a/client/ui/menu/index.js b/client/ui/menu/index.js
index ddd2b18..845f1d8 100644
--- a/client/ui/menu/index.js
+++ b/client/ui/menu/index.js
@@ -1,10 +1,11 @@
 // 3rd party.
 import classnames from 'classnames';
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 // 2nd party.
 import {compose} from '@avocado/core';
 import contempo from 'contempo';
 // 1st party.
+import {useEvent} from '../hooks/use-event';
 import QuickStatus from './quick-status';
 import Hotbar from './hotbar';
 import Inventory from './inventory';
@@ -16,21 +17,14 @@ const decorate = compose(
 
 const MenuComponent = ({app}) => {
   const [opened, setOpened] = useState(false);
-  useEffect(() => {
-    const onMenuOpenedChanged = () => {
-      setOpened(app.isMenuOpened);
-    }
-    onMenuOpenedChanged();
-    app.on('isMenuOpenedChanged', onMenuOpenedChanged);
-    return () => {
-      app.off('isMenuOpenedChanged', onMenuOpenedChanged);
-    };
-  }, []);
+  useEvent(app, 'isMenuOpenedChanged', (_, isOpened) => {
+    setOpened(isOpened);
+  });
   return <div className="menu unselectable">
     <div className={classnames(
-    'menu-inner',
-    opened ? 'open' : '',
-  )}>
+      'menu-inner',
+      opened ? 'open' : '',
+    )}>
       <Inventory app={app} />
       <QuickStatus app={app} />
       <WorldTime worldTime={app.worldTime} />