Remove recompose dep and use React.memo instead.

package.json

@@ -19,7 +19,6 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "3.2.0",
-    "recompose": "^0.30.0",
     "redux": "^4.0.1",
     "redux-actions": "^2.6.4",
     "redux-logger": "^3.0.6",
@@ -46,7 +45,6 @@
     "@types/react-redux": "^5.0.14",
     "@types/react-router": "^4.4.4",
     "@types/react-router-dom": "^4.3.1",
-    "@types/recompose": "^0.27.0",
     "@types/redux": "^3.6.0",
     "@types/redux-actions": "^2.3.2",
     "@types/redux-logger": "^3.0.5",

src/Pim/index.tsx

@@ -12,7 +12,6 @@ import { Action } from 'redux-actions';
 import * as EteSync from '../api/EteSync';
 
 import { createSelector } from 'reselect';
-import { pure } from 'recompose';
 
 import { History } from 'history';
 
@@ -78,7 +77,7 @@ const itemsSelector = createSelector(
   }
 );
 
-const ItemChangeLog = pure((props: any) => {
+const ItemChangeLog = React.memo((props: any) => {
   const {
     syncInfo,
     paramItemUid,

src/components/AddressBook.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { pure } from 'recompose';
 import { createSelector } from 'reselect';
 
 import * as colors from '@material-ui/core/colors';
@@ -39,7 +38,7 @@ function getContactColor(contact: ContactType) {
   return colorOptions[sum % colorOptions.length];
 }
 
-const AddressBookItem = pure((_props: any) => {
+const AddressBookItem = React.memo((_props: any) => {
   const {
     entry,
     onClick,

src/components/TaskList.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 
-import { pure } from 'recompose';
 import { createSelector } from 'reselect';
 
 import { List, ListItem } from '../widgets/List';
 
 import { TaskType } from '../pim-types';
 
-const TaskListItem = pure((_props: any) => {
+const TaskListItem = React.memo((_props: any) => {
   const {
     entry,
     onClick,

src/widgets/Avatar.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { pure } from 'recompose';
 
-export const Avatar = pure((props: { children: React.ReactNode[] | React.ReactNode, size?: number, style?: any }) => {
+export const Avatar = React.memo((props: { children: React.ReactNode[] | React.ReactNode, size?: number, style?: any }) => {
   const size = (props.size) ? props.size : 40;
 
   return (

src/widgets/ConfirmationDialog.tsx

@@ -6,9 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
 import Button from '@material-ui/core/Button';
 
-import { pure } from 'recompose';
-
-export default pure((_props: any) => {
+export default React.memo((_props: any) => {
   const {
     title,
     children,

src/widgets/ExternalLink.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { pure } from 'recompose';
 
-export const ExternalLink = pure(({children, ...props}: any) => (
+export const ExternalLink = React.memo(({children, ...props}: any) => (
   <a target="_blank" rel="noopener" {...props}>
     {children}
   </a>

src/widgets/List.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import ExternalLink from './ExternalLink';
 
 import './List.css';
 
-export const List = pure((props: { children: React.ReactNode[] | React.ReactNode }) => (
+export const List = React.memo((props: { children: React.ReactNode[] | React.ReactNode }) => (
   <ul className="List">
     {props.children}
   </ul>
 ));
 
-export const ListItemRaw = pure((_props: any) => {
+export const ListItemRaw = React.memo((_props: any) => {
   const {
     href,
     children,
@@ -53,7 +52,7 @@ export const ListItemRaw = pure((_props: any) => {
   );
 });
 
-export const ListSubheader = pure((props: any) => (
+export const ListSubheader = React.memo((props: any) => (
   <li
     {...props}
     className="ListItem ListSubheader"
@@ -62,7 +61,7 @@ export const ListSubheader = pure((props: any) => (
   </li>
 ));
 
-export const ListDivider = pure((_props: any) => {
+export const ListDivider = React.memo((_props: any) => {
   const {
     inset,
     ...props
@@ -74,7 +73,7 @@ export const ListDivider = pure((_props: any) => {
   );
 });
 
-export const ListItem = pure((_props: any) => {
+export const ListItem = React.memo((_props: any) => {
   const {
     leftIcon,
     rightIcon,

src/widgets/PrettyError.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { pure } from 'recompose';
 
-export const PrettyError = pure((props: any) => (
+export const PrettyError = React.memo((props: any) => (
   <div>
     <h2>Something went wrong!</h2>
     <pre>

src/widgets/withSpin.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import './withSpin.css';
 
 const withSpin = (Component: any) => {
-  return pure((_props: any) => {
+  return React.memo((_props: any) => {
     const {
       spin,
       ...props

yarn.lock

@@ -1450,13 +1450,6 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/recompose@^0.27.0":
-  version "0.27.1"
-  resolved "https://registry.yarnpkg.com/@types/recompose/-/recompose-0.27.1.tgz#eafe5a80b6bdce2108c025bbf19d030136aad894"
-  integrity sha512-5bT3OMz9HHHwvRSMQaDGN8tWbpCxQfsZXlcy5HLexEEqkSJ9PBZfVMA6HANDbshOvn4kNS75SjQSJLJv5LJHxw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/redux-actions@^2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.3.2.tgz#a141515f280d19fd53be7e8a9994985847423540"
@@ -8871,7 +8864,7 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
-"recompose@0.28.0 - 0.30.0", recompose@^0.30.0:
+"recompose@0.28.0 - 0.30.0":
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
   integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==