How to use the recompact.onlyUpdateForKeys function in recompact

UniqueTokenAttributes.propTypes = {
  background: PropTypes.string,
  dimensions: dimensionsPropType,
  onListLayout: PropTypes.func,
  onScroll: PropTypes.func,
  traits: PropTypes.arrayOf(PropTypes.shape({
    trait_type: PropTypes.string.isRequired,
    value: PropTypes.node.isRequired,
  })),
  willListOverflow: PropTypes.bool,
};

UniqueTokenAttributes.padding = AttributesPadding;

const enhance = compose(
  onlyUpdateForKeys(['traits', 'willListOverflow']),
  withState('willListOverflow', 'setWillListOverflow', false),
  withProps(({ traits }) => ({
    // Sort traits alphabetically by "trait_type"
    traits: sortList(traits, 'trait_type', 'asc'),
  })),
  withHandlers({
    onListLayout: ({ dimensions, setWillListOverflow }) => ({ nativeEvent: { layout } }) => {
      setWillListOverflow(layout.height > dimensions.height);
    },
    onScroll: () => event => event.stopPropagation(),
  }),
);
/* eslint-enable camelcase */

export default hoistStatics(enhance)(UniqueTokenAttributes);

render = () => (
    
  )
}

export default compose(
  withNavigation,
  onlyUpdateForKeys(['textToCopy', 'tooltipText']),
)(CopyTooltip);

import { Text } from '../text';

const titleRenderer = withProps({
  size: 'large',
  weight: 'bold',
})(Text);

export default compose(
  pickProps(Object.keys(ListHeader.propTypes)),
  withProps({
    isSticky: true,
    shouldRasterizeIOS: true,
    showDivider: false,
    titleRenderer,
  }),
  onlyUpdateForKeys(['title']),
)(ListHeader);

color: colors.blueGreyLightest,
  size: 'tiny',
  weight: 'medium',
})`
  letter-spacing: 0.3px;
  line-height: 13;
  margin-bottom: 1;
  opacity: 0.7;
`;

const enhance = compose(
  withProps(({ text, title }) => ({
    text: upperFirst(text),
    title: upperCase(title),
  })),
  onlyUpdateForKeys(['text', 'title']),
);

const Tag = enhance(({ text, title, ...props }) => (
  
    
      <title>{title}</title>
      
    
  
));

Tag.propTypes = {
  text: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};

const FallbackTextColorVariants = {
  dark: colors.blueGreyLight,
  light: colors.white,
};

const getFallbackTextColor = bg => colors.getTextColorForBackground(bg, FallbackTextColorVariants);

const enhance = compose(
  withState('error', 'handleErrorState', null),
  withHandlers({ onError: ({ handleErrorState }) => error => handleErrorState(error) }),
  withProps(({ backgroundColor, item }) => ({
    fallbackTextColor: getFallbackTextColor(backgroundColor),
    name: buildUniqueTokenName(item),
  })),
  onlyUpdateForKeys(['error', 'imageUrl']),
);

const UniqueTokenImage = enhance(({
  backgroundColor,
  borderRadius,
  error,
  fallbackTextColor,
  imageUrl,
  name,
  onError,
  resizeMode,
}) => (
  
    {(imageUrl && !error) ? (

import { View } from 'react-primitives';
import { onlyUpdateForKeys } from 'recompact';
import styled from 'styled-components/primitives';
import { Centered } from '../layout';
import { borders, colors, padding } from '../../styles';

const PagerPadding = 9;

const Container = styled(Centered)`
  ${padding(PagerPadding)};
  left: 0;
  position: absolute;
  right: 0;
`;

const enhance = onlyUpdateForKeys(['selectedIndex']);

const PagerControls = enhance(({
  color,
  length,
  selectedIndex,
  size,
  ...props
}) => (
  
    {times(length, index => (

import PropTypes from 'prop-types';
import React from 'react';
import { onlyUpdateForKeys } from 'recompact';
import Divider from '../Divider';
import { Monospace } from '../text';
import { ListHeader } from '../list';

const enhance = onlyUpdateForKeys(['showShitcoins', 'title', 'totalValue']);

const AssetListHeader = enhance(({
  showShitcoins,
  title,
  totalValue,
  ...props
}) => (
  
    {totalValue ? (
      
        {totalValue}
      
    ) : null}
  
));

import PropTypes from 'prop-types';
import React from 'react';
import Animated from 'react-native-reanimated';
import { transformOrigin } from 'react-native-redash';
import { onlyUpdateForKeys } from 'recompact';
import { borders, colors, position } from '../../styles';
import { Icon } from '../icons';
import { ShadowStack } from '../shadow-stack';
import FloatingActionButton from './FloatingActionButton';

const size = 34;

const enhance = onlyUpdateForKeys(['deleteButtonScale']);
const DeleteButton = enhance(({ deleteButtonScale }) => (

import PropTypes from 'prop-types';
import React, { createElement } from 'react';
import { onlyUpdateForKeys } from 'recompact';
import { safeAreaInsetValues } from '../../utils';
import { FlexItem, RowWithMargins } from '../layout';
import SendFab from './SendFab';

const bottomPosition = 21 + safeAreaInsetValues.bottom;

const enhance = onlyUpdateForKeys(['children', 'disabled']);
const FabWrapper = enhance(({
  children,
  disabled,
  fabs,
  ...props
}) => (
  
    {children}
    {!disabled && (

Row,
  RowWithMargins,
} from '../layout';
import { Emoji, Monospace, Text } from '../text';

const HeaderHeight = 48;

const Container = styled(Row).attrs({
  align: 'center',
  justify: 'space-between',
})`
  ${padding(0, 15)};
  height: ${HeaderHeight};
`;

const enhance = onlyUpdateForKeys(['collapsed', 'title', 'value']);

const InvestmentCardHeader = enhance(({
  collapsed,
  color,
  emoji,
  isCollapsible,
  title,
  titleColor,
  value,
}) => (