Change recompose methods usage for React.memo

examples/demo/src/visitors/FullNameField.tsx

@@ -1,6 +1,5 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import pure from 'recompose/pure';
 
 import AvatarField from './AvatarField';
 import { FieldProps, Customer } from '../types';
@@ -34,11 +33,9 @@ const FullNameField: FC<Props> = ({ record, size }) => {
     ) : null;
 };
 
-const PureFullNameField = pure(FullNameField);
-
-PureFullNameField.defaultProps = {
+FullNameField.defaultProps = {
     source: 'last_name',
     label: 'resources.customers.fields.name',
 };
 
-export default PureFullNameField;
+export default memo<Props>(FullNameField);

packages/ra-core/src/util/FieldTitle.tsx

@@ -1,5 +1,4 @@
-import React, { FunctionComponent, ReactElement } from 'react';
-import pure from 'recompose/pure';
+import React, { FunctionComponent, ReactElement, memo } from 'react';
 
 import useTranslate from '../i18n/useTranslate';
 import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
@@ -38,4 +37,4 @@ export const FieldTitle: FunctionComponent<Props> = ({
 // wat? TypeScript looses the displayName if we don't set it explicitly
 FieldTitle.displayName = 'FieldTitle';
 
-export default pure(FieldTitle);
+export default memo(FieldTitle);

packages/ra-ui-materialui/src/button/CloneButton.tsx

@@ -1,6 +1,5 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, memo, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import shouldUpdate from 'recompose/shouldUpdate';
 import Queue from '@material-ui/icons/Queue';
 import { Link } from 'react-router-dom';
 import { stringify } from 'query-string';
@@ -57,13 +56,4 @@ CloneButton.propTypes = {
     record: PropTypes.any,
 };
 
-const enhance = shouldUpdate(
-    (props: Props, nextProps: Props) =>
-        (props.record &&
-            nextProps.record &&
-            props.record !== nextProps.record) ||
-        props.basePath !== nextProps.basePath ||
-        (props.record == null && nextProps.record != null)
-);
-
-export default enhance(CloneButton);
+export default memo(CloneButton);

packages/ra-ui-materialui/src/button/CreateButton.tsx

@@ -1,6 +1,5 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, memo } from 'react';
 import PropTypes from 'prop-types';
-import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
 import { Fab, makeStyles, useMediaQuery, Theme } from '@material-ui/core';
 import ContentAdd from '@material-ui/icons/Add';
 import classnames from 'classnames';
@@ -85,5 +84,10 @@ CreateButton.propTypes = {
     label: PropTypes.string,
 };
 
-const enhance = onlyUpdateForKeys(['basePath', 'label', 'translate']);
-export default enhance(CreateButton);
+export default memo(CreateButton, (prevProps, nextProps) => {
+    return (
+        prevProps.basePath === nextProps.basePath &&
+        prevProps.label === nextProps.label &&
+        prevProps.translate === nextProps.translate
+    );
+});

packages/ra-ui-materialui/src/button/ShowButton.tsx

@@ -1,6 +1,5 @@
-import React, { FC, ReactElement } from 'react';
+import React, { FC, memo, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import shouldUpdate from 'recompose/shouldUpdate';
 import ImageEye from '@material-ui/icons/RemoveRedEye';
 import { Link } from 'react-router-dom';
 import { linkToRecord, Record } from 'ra-core';
@@ -45,13 +44,13 @@ ShowButton.propTypes = {
     record: PropTypes.any,
 };
 
-const enhance = shouldUpdate(
+const PureShowButton = memo(
+    ShowButton,
     (props: Props, nextProps: Props) =>
-        (props.record &&
-            nextProps.record &&
-            props.record.id !== nextProps.record.id) ||
-        props.basePath !== nextProps.basePath ||
-        (props.record == null && nextProps.record != null)
+        (props.record && nextProps.record
+            ? props.record.id === nextProps.record.id
+            : props.record == nextProps.record) &&
+        props.basePath === nextProps.basePath
 );
 
-export default enhance(ShowButton);
+export default PureShowButton;

packages/ra-ui-materialui/src/field/ArrayField.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 
-import { ArrayField } from './ArrayField';
+import ArrayField from './ArrayField';
 import NumberField from './NumberField';
 import TextField from './TextField';
 import Datagrid from '../list/Datagrid';

packages/ra-ui-materialui/src/field/ArrayField.tsx

@@ -123,35 +123,37 @@ const getDataAndIds = (record: object, source: string, fieldKey: string) => {
  */
 export const ArrayField: FunctionComponent<
     ArrayFieldProps & FieldProps & InjectedFieldProps
-> = ({
-    addLabel,
-    basePath,
-    children,
-    record,
-    sortable,
-    source,
-    fieldKey,
-    ...rest
-}) => {
-    const [ids, setIds] = useState();
-    const [data, setData] = useState();
+> = memo<ArrayFieldProps & FieldProps & InjectedFieldProps>(
+    ({
+        addLabel,
+        basePath,
+        children,
+        record,
+        sortable,
+        source,
+        fieldKey,
+        ...rest
+    }) => {
+        const [ids, setIds] = useState();
+        const [data, setData] = useState();
 
-    useEffect(() => {
-        const { ids, data } = getDataAndIds(record, source, fieldKey);
-        setIds(ids);
-        setData(data);
-    }, [record, source, fieldKey]);
+        useEffect(() => {
+            const { ids, data } = getDataAndIds(record, source, fieldKey);
+            setIds(ids);
+            setData(data);
+        }, [record, source, fieldKey]);
 
-    // @ts-ignore
-    return cloneElement(Children.only(children), {
-        ids,
-        data,
-        loading: false,
-        basePath,
-        currentSort: {},
-        ...rest,
-    });
-};
+        // @ts-ignore
+        return cloneElement(Children.only(children), {
+            ids,
+            data,
+            loading: false,
+            basePath,
+            currentSort: {},
+            ...rest,
+        });
+    }
+);
 
 ArrayField.defaultProps = {
     addLabel: true,
@@ -162,4 +164,4 @@ ArrayField.propTypes = {
     fieldKey: PropTypes.string,
 };
 
-export default memo<ArrayFieldProps & FieldProps>(ArrayField);
+export default ArrayField;

packages/ra-ui-materialui/src/field/BooleanField.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import expect from 'expect';
-import { BooleanField } from './BooleanField';
+import BooleanField from './BooleanField';
 import { render, cleanup } from '@testing-library/react';
 
 const defaultProps = {

packages/ra-ui-materialui/src/field/BooleanField.tsx

@@ -1,12 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, memo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import pure from 'recompose/pure';
 import FalseIcon from '@material-ui/icons/Clear';
 import TrueIcon from '@material-ui/icons/Done';
 import { Tooltip, Typography } from '@material-ui/core';
 import { TypographyProps } from '@material-ui/core/Typography';
-import compose from 'recompose/compose';
 import { useTranslate } from 'ra-core';
 
 import { FieldProps, InjectedFieldProps, fieldPropTypes } from './types';
@@ -19,71 +17,68 @@ interface Props extends FieldProps {
 
 export const BooleanField: FunctionComponent<
     Props & InjectedFieldProps & TypographyProps
-> = ({
-    className,
-    classes: classesOverride,
-    emptyText,
-    source,
-    record = {},
-    valueLabelTrue,
-    valueLabelFalse,
-    ...rest
-}) => {
-    const translate = useTranslate();
-    const value = get(record, source);
-    let ariaLabel = value ? valueLabelTrue : valueLabelFalse;
+> = memo<Props & InjectedFieldProps & TypographyProps>(
+    ({
+        className,
+        classes: classesOverride,
+        emptyText,
+        source,
+        record = {},
+        valueLabelTrue,
+        valueLabelFalse,
+        ...rest
+    }) => {
+        const translate = useTranslate();
+        const value = get(record, source);
+        let ariaLabel = value ? valueLabelTrue : valueLabelFalse;
 
-    if (!ariaLabel) {
-        ariaLabel = value === false ? 'ra.boolean.false' : 'ra.boolean.true';
-    }
+        if (!ariaLabel) {
+            ariaLabel =
+                value === false ? 'ra.boolean.false' : 'ra.boolean.true';
+        }
+
+        if (value === false || value === true) {
+            return (
+                <Typography
+                    component="span"
+                    variant="body2"
+                    className={className}
+                    {...sanitizeRestProps(rest)}
+                >
+                    <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
+                        {value === true ? (
+                            <TrueIcon data-testid="true" />
+                        ) : (
+                            <FalseIcon data-testid="false" />
+                        )}
+                    </Tooltip>
+                </Typography>
+            );
+        }
 
-    if (value === false || value === true) {
         return (
             <Typography
                 component="span"
                 variant="body2"
                 className={className}
                 {...sanitizeRestProps(rest)}
             >
-                <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
-                    {value === true ? (
-                        <TrueIcon data-testid="true" />
-                    ) : (
-                        <FalseIcon data-testid="false" />
-                    )}
-                </Tooltip>
+                {emptyText}
             </Typography>
         );
     }
+);
 
-    return (
-        <Typography
-            component="span"
-            variant="body2"
-            className={className}
-            {...sanitizeRestProps(rest)}
-        >
-            {emptyText}
-        </Typography>
-    );
-};
-
-const EnhancedBooleanField = compose<
-    Props & InjectedFieldProps & TypographyProps,
-    Props & TypographyProps
->(pure)(BooleanField);
-
-EnhancedBooleanField.defaultProps = {
+BooleanField.defaultProps = {
     addLabel: true,
 };
 
-EnhancedBooleanField.propTypes = {
+BooleanField.propTypes = {
     // @ts-ignore
     ...Typography.propTypes,
     ...fieldPropTypes,
     valueLabelFalse: PropTypes.string,
     valueLabelTrue: PropTypes.string,
 };
-EnhancedBooleanField.displayName = 'EnhancedBooleanField';
 
-export default EnhancedBooleanField;
+export default BooleanField;

packages/ra-ui-materialui/src/field/ChipField.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import expect from 'expect';
-import { ChipField } from './ChipField';
+import ChipField from './ChipField';
 import { render, cleanup } from '@testing-library/react';
 
 describe('<ChipField />', () => {

packages/ra-ui-materialui/src/field/ChipField.tsx

@@ -1,7 +1,5 @@
-import React, { FunctionComponent } from 'react';
-import compose from 'recompose/compose';
+import React, { FunctionComponent, memo } from 'react';
 import get from 'lodash/get';
-import pure from 'recompose/pure';
 import Chip, { ChipProps } from '@material-ui/core/Chip';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
@@ -19,7 +17,7 @@ const useStyles = makeStyles(
 
 export const ChipField: FunctionComponent<
     FieldProps & InjectedFieldProps & ChipProps
-> = props => {
+> = memo<FieldProps & InjectedFieldProps & ChipProps>(props => {
     const {
         className,
         classes: classesOverride,
@@ -51,22 +49,15 @@ export const ChipField: FunctionComponent<
             {...sanitizeRestProps(rest)}
         />
     );
-};
-
-const EnhancedChipField = compose<
-    FieldProps & InjectedFieldProps & ChipProps,
-    FieldProps & ChipProps
->(pure)(ChipField);
+});
 
-EnhancedChipField.defaultProps = {
+ChipField.defaultProps = {
     addLabel: true,
 };
 
-EnhancedChipField.propTypes = {
+ChipField.propTypes = {
     ...ChipField.propTypes,
     ...fieldPropTypes,
 };
 
-EnhancedChipField.displayName = 'EnhancedChipField';
-
-export default EnhancedChipField;
+export default ChipField;

packages/ra-ui-materialui/src/field/DateField.spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import assert from 'assert';
 import { render, cleanup } from '@testing-library/react';
-import { DateField } from './DateField';
+import DateField from './DateField';
 
 describe('<DateField />', () => {
     afterEach(cleanup);