use memo

wax-prosemirror-components/src/components/Button.js

 /* eslint react/prop-types: 0 */
 
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import MenuButton from '../ui/buttons/MenuButton';
 
@@ -26,16 +26,21 @@ const Button = ({ view = {}, item }) => {
   const isDisabled =
     enable && !enable(state) && !(select && select(state, activeViewId));
 
-  return (
-    <MenuButton
-      active={isActive || false}
-      disabled={isDisabled}
-      iconName={icon}
-      label={label}
-      onMouseDown={handleMouseDown}
-      title={title}
-    />
+  const MenuButtonComponent = useMemo(
+    () => (
+      <MenuButton
+        active={isActive || false}
+        disabled={isDisabled}
+        iconName={icon}
+        label={label}
+        onMouseDown={handleMouseDown}
+        title={title}
+      />
+    ),
+    [],
   );
+
+  return MenuButtonComponent;
 };
 
 export default Button;

wax-prosemirror-components/src/components/ToolGroupComponent.js

 /* eslint react/prop-types: 0 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import Dropdown from '../ui/buttons/Dropdown';
@@ -30,18 +30,22 @@ const ToolGroupComponent = ({ view, tools, name }) => {
       : toolsShown.push(tool.renderTool(view));
   });
 
-  return (
-    <Wrapper data-name={name}>
-      {toolsShown}
-      {rest.length > 0 && (
-        <Dropdown
-          iconName="more"
-          dropComponent={<DropWrapper>{rest}</DropWrapper>}
-          title="Show more tools"
-        />
-      )}
-    </Wrapper>
+  const MemorizedToolGroupComponent = useMemo(
+    () => (
+      <Wrapper data-name={name}>
+        {toolsShown}
+        {rest.length > 0 && (
+          <Dropdown
+            iconName="more"
+            dropComponent={<DropWrapper>{rest}</DropWrapper>}
+            title="Show more tools"
+          />
+        )}
+      </Wrapper>
+    ),
+    [],
   );
+  return MemorizedToolGroupComponent;
 };
 
 export default ToolGroupComponent;

wax-prosemirror-components/src/components/trackChanges/TrackChangeEnable.js

 /* eslint react/prop-types: 0 */
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import MenuButton from '../../ui/buttons/MenuButton';
 
 const TrackChangeEnable = ({ view = {}, item, enabled }) => {
@@ -11,15 +11,20 @@ const TrackChangeEnable = ({ view = {}, item, enabled }) => {
     item.run(view.state, view.dispatch);
   };
 
-  return (
-    <MenuButton
-      active={isEnabled}
-      disabled={item.enable && !item.enable(view.state)}
-      label="Track Changes"
-      onMouseDown={e => handleMouseDown(e)}
-      title={item.title}
-    />
+  const MenuButtonComponent = useMemo(
+    () => (
+      <MenuButton
+        active={isEnabled}
+        disabled={item.enable && !item.enable(view.state)}
+        label="Track Changes"
+        onMouseDown={e => handleMouseDown(e)}
+        title={item.title}
+      />
+    ),
+    [],
   );
+
+  return MenuButtonComponent;
 };
 
 export default TrackChangeEnable;

wax-prosemirror-components/src/ui/buttons/MenuButton.js

@@ -78,7 +78,7 @@ const MenuButton = props => {
     title,
     onMouseDown,
   } = props;
-
+  console.log('here?');
   return (
     <Wrapper
       active={active}

wax-prosemirror-services/src/WaxToolGroups/DisplayTextToolGroupService/DisplayText.js

-import React from 'react';
+import React, { useMemo } from 'react';
 import { injectable, inject } from 'inversify';
 import { BlockLevelTools, Tabs, ToolGroups } from 'wax-prosemirror-components';
 import { isEmpty } from 'lodash';
@@ -50,7 +50,12 @@ class DisplayText extends ToolGroup {
     };
 
     const tabList = [first, second];
-    return <Tabs key={uuidv4()} tabList={tabList} />;
+
+    const TabsComponent = useMemo(
+      () => <Tabs key={uuidv4()} tabList={tabList} />,
+      [],
+    );
+    return TabsComponent;
   }
 }