Rewrote app to use hooks and fixed multiple re-renders.

client/src/components/header/header.component.jsx

@@ -3,20 +3,41 @@ import { Link } from "react-router-dom";
 import { Menu, Icon } from "antd";
 import "./header.styles.scss";
 import SignOut from "../sign-out/sign-out.component";
+import { useQuery } from "react-apollo";
+import {
+  GET_LANDING_NAV_ITEMS,
+  GET_NAV_ITEMS
+} from "../../graphql/metadata.queries";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default ({ landingHeader }) => {
+  let HookNavItems;
+
+  if (landingHeader) {
+    HookNavItems = useQuery(GET_LANDING_NAV_ITEMS);
+  } else {
+    HookNavItems = useQuery(GET_NAV_ITEMS);
+  }
 
-export default ({ landingHeader, selectedNavItem, navItems }) => {
   const handleClick = e => {
     console.log("click ", e);
     // this.setState({
     //   current: e.key
     // });
   };
+
+  if (HookNavItems.loading) return <LoadingSpinner />;
+  if (HookNavItems.error)
+    return <AlertComponent message={HookNavItems.error.message} />;
+
+  const navItems = JSON.parse(HookNavItems.data.masterdata_by_pk.value);
   return (
     <Menu
       theme="dark"
       className="header"
       onClick={handleClick}
-      selectedKeys={selectedNavItem}
+      selectedKeys="Home"
       mode="horizontal"
     >
       {navItems.map(navItem => (