code refactoring

Author: lineldcosta

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-menu-hook",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Responsive menu using react hooks",
   "main": "index.js",
   "module": "dist/react-responsive-menu-hook.mjs",

src/index.js

@@ -21,7 +21,7 @@ const ReactResponsiveMenu = ({ children }) => {
   const [menuItems, setMenuItems] = React.useState({})
   const [open, setOpen] = React.useState(false)
 
-  const toggle = value => setOpen(value)
+  const toggle = React.useCallback(value => setOpen(value), [setOpen])
 
   const observe = React.useCallback(
     elements => {
@@ -48,11 +48,9 @@ const ReactResponsiveMenu = ({ children }) => {
       threshold: 1,
     })
 
-    Array.from(navRef.current.children).forEach(item => {
-      if (item.dataset.targetid) {
-        observer.observe(item)
-      }
-    })
+    Array.from(navRef.current.children).forEach(
+      item => item.dataset.targetid && observer.observe(item)
+    )
     return observer
   }, [])
 
@@ -65,19 +63,6 @@ const ReactResponsiveMenu = ({ children }) => {
     [toggle]
   )
 
-  React.useEffect(() => {
-    const observer = attachObserver()
-    document.addEventListener('click', handleClickOutside)
-    return () => {
-      observer.disconnect()
-      document.removeEventListener('click', handleClickOutside)
-    }
-  }, [])
-
-  // React.useEffect(() => {
-  //   warning(!isFragment(children()), `Menu should wrapped inside fragment`)
-  // }, [children])
-
   const showEllipsis = React.useMemo(
     () => Object.values(menuItems).some(v => v === false),
     [menuItems]
@@ -138,9 +123,25 @@ const ReactResponsiveMenu = ({ children }) => {
     toggle,
   }
 
+  React.useEffect(() => {
+    const observer = attachObserver()
+    document.addEventListener('click', handleClickOutside)
+    return () => {
+      observer.disconnect()
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    warning(
+      isFragment(children(childProps)),
+      `Menu should wrapped inside fragment`
+    )
+  }, [])
+
   return (
     <div ref={navRef} style={styles.menuWrapper}>
-      {children({ ...childProps })}
+      {children(childProps)}
     </div>
   )
 }