How to use the react.memo function in react

FontWeights,
  DefaultButton,
  Label,
  ColorClassNames,
} from 'office-ui-fabric-react';
import { isNil } from 'lodash';
import PropTypes from 'prop-types';

import { JobProtocol } from '../../models/job-protocol';
import Context from '../context';
import {
  getJobComponentsFromConfig,
  isValidUpdatedTensorBoardExtras,
} from '../../utils/utils';

export const ImportConfig = React.memo(
  ({ extras, onChange, isSingle, history, setYamlText }) => {
    const { vcNames } = useContext(Context);

    const _updatedComponent = protocolYaml => {
      const updatedJob = JobProtocol.fromYaml(protocolYaml);
      if (isNil(updatedJob)) {
        return;
      }

      if (onChange === undefined) {
        return;
      }

      const [
        updatedJobInformation,
        updatedTaskRoles,

/*
 * This file is part of the nivo project.
 *
 * Copyright 2016-present, Raphaël Benitte.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { arc as d3Arc } from 'd3-shape'
import RadarTooltipItem from './RadarTooltipItem'

const RadarTooltip = memo(
    ({ data, keys, getIndex, colorByKey, radius, angleStep, tooltipFormat }) => {
        const arc = d3Arc()
            .outerRadius(radius)
            .innerRadius(0)

        const halfAngleStep = angleStep * 0.5
        let rootStartAngle = -halfAngleStep

        return (

{ playing ? 
              <i> clickPlaying(e, false)}&gt;</i>
              :
              <i> clickPlaying(e, true)}&gt;</i> 
            }
          
        
        <div>
          <i></i>
        </div>
      
    
  )
}

export default React.memo(MiniPlayer);

<p>{albumName}</p>
              <p>{artistName}</p>
            
            <span>{dayjs(Date.now()).format('MM-DD')}</span>
          
        );
      })}
    
  );
});

interface SliderProps {
  banners: RecommendState['banners'];
}

const Slider: FC = memo(({ banners }: SliderProps) =&gt; {
  if (!Array.isArray(banners)) return null;
  if (banners.length &lt; 1) return null;
  let timer: any = undefined;

  useEffect(() =&gt; {
    return () =&gt; {
      clearTimeout(timer);
    };
  }, [timer]);

  const slickRef = useRef(null);

  const handleSlickSwipe = () =&gt; {
    if (slickRef.current) {
      const { current: Slick } = slickRef;
      clearTimeout(timer);

/>

metric: pluginItem.properties.metric,
        queries: pluginItem.properties.queries,
        mutator: pluginItem.properties.mutator,
      };
    }
  });
  return topConsumers;
};

const getResourceToWatch = (model: K8sKind) => ({
  isList: true,
  kind: model.crd ? referenceForModel(model) : model.kind,
  prop: 'consumers',
});

const BarLink: React.FC = React.memo(({ model, title, namespace }) => (
  {title}
));

const TopConsumersCard_ = connectToURLs(MonitoringRoutes.Prometheus)(({
  watchPrometheus,
  stopWatchPrometheusQuery,
  prometheusResults,
  watchK8sResource,
  stopWatchK8sResource,
  resources,
  urls,
  flags = {},
}: TopConsumersCardProps) => {
  const [type, setType] = React.useState(PODS);
  const [sortOption, setSortOption] = React.useState(MetricType.CPU);

<div>
      <div>Speed</div>
      <button>
        
      </button>
      <span>
        {Math.round(speed * 100)}%
      </span>
      <button>
        
      </button>
    </div>
  );
};

export const PlaybackSpeed = React.memo(_PlaybackSpeed);

{subscription.unsubscriptionDate &&
        formatDate(subscription.unsubscriptionDate)}
    
    
      
    
  
);

interface Props {
  currency: CurrencyEnum;
  subscription: SignalSubscriber;
}

const ProgramSubscriptionsRow = React.memo(_ProgramSubscriptionsRow);
export default ProgramSubscriptionsRow;

export interface SealedSecretDialogProps {
  applicationId: string | null;
  open: boolean;
  onClose: () => void;
}

const DIALOG_TITLE = "Encrypting secret data for application";
const BASE64_CHECKBOX_LABEL =
  "Use base64 encoding before encrypting the secret";

const validationSchema = yup.object({
  secretData: yup.string().required(),
  base64: yup.bool(),
});

export const SealedSecretDialog: FC = memo(
  function SealedSecretDialog({ open, applicationId, onClose }) {
    const classes = useStyles();
    const dispatch = useAppDispatch();

    const application = useAppSelector(
      (state) =>
        applicationId
          ? selectById(state.applications, applicationId)
          : undefined
    );
    const sealedSecret = useAppSelector(
      (state) => state.sealedSecret.data
    );

    const formik = useFormik({
      initialValues: {