React.useCallBack、React.useMemo 和 React.Memo 之间的区别与示例？

Question

what are the different kind of use cases of React.useCallBack, React.useMemo and React.Memo?

Answer 1

import _ from 'lodash';
import React, { useState, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useOutsideClickHandler } from 'utilities/method';
import { useTranslation } from 'react-i18next';

    function FilterIndicators({
      filters,
      onDeleteFilter,
      onRemoveFilter,
      removeAllFilters,
    }) {
      const { t } = useTranslation();
      const [openedTagIndex, setOpenedTagIndex] = useState(null);
      const handleFilterButtonClick = useCallback(
        (index) => {
          if (openedTagIndex === index) {
            setOpenedTagIndex(null);
          } else {
            setOpenedTagIndex(index);
          }
        },
        [openedTagIndex],
      );
    
      const hideOptions = useCallback(() => {
        setOpenedTagIndex(null);
      }, []);
    
      const deleteFilters = useCallback(
        (e, filterName) => {
          e.preventDefault();
          onDeleteFilter(filterName);
          hideOptions();
        },
        [onDeleteFilter, hideOptions],
      );
    
      const removeFilter = useCallback(
        (e, filterOption, filterName) => {
          e.preventDefault();
          onRemoveFilter(filterOption, filterName);
          hideOptions();
        },
        [onRemoveFilter, hideOptions],
      );
    
      const wrapperRef = useRef(null);
      useOutsideClickHandler(wrapperRef, hideOptions);
    
      return (
        <FilterIndicatorsSC data-testid="admin-filter-indicators" ref={wrapperRef}>
          {filters.map((filter, index) => {
            if (filter.isShow) {
              return (
                <FilterTag
                  key={filter.id}
                  data-testid="admin-filter-sub-indicators"
                >
                  <FilterButton onClick={() => handleFilterButtonClick(index)}>
                    <FilterName>{filter.name}</FilterName>
                    <CaretIcon className="fa fa-caret-down" />
                    <CloseIcon
                      className="fa fa-times"
                      title={t('asset_configuration_panel.remove_filter')}
                      onClick={(e) => deleteFilters(e, filter.filterName)}
                    />
                  </FilterButton>
                  {openedTagIndex === index ? (
                    <FilterPopup>
                      {filter.filterOptions &&
                        filter.filterOptions.map((filterOption) => (
                          <FilterOption key={filterOption}>
                            <FilterOptionLabel>
                              {'' + filterOption}
                            </FilterOptionLabel>
                            <FilterOptionCloseIcon
                              className="fa fa-times"
                              onClick={(e) =>
                                removeFilter(e, filterOption, filter.filterName)
                              }
                            />
                          </FilterOption>
                        ))}
                    </FilterPopup>
                  ) : null}
                </FilterTag>
              );
            } else {
              return null;
            }
          })}
          {filters.filter((filter) => filter.isShow).length > 0 && (
            <FilterBarClearButton
              title={t('clear_all_filters')}
              onClick={removeAllFilters}
            >
              {t('clear_all')}
            </FilterBarClearButton>
          )}
        </FilterIndicatorsSC>
      );
    }
    
    FilterIndicators.propTypes = {
      /** List of all the filters applied */
      filters: PropTypes.array,
      onRemoveFilter: PropTypes.func.isRequired,
      onDeleteFilter: PropTypes.func.isRequired,
      removeAllFilters: PropTypes.func.isRequired,
    };
    
    FilterIndicators.defaultProps = {
      filters: [],
      onRemoveFilter: () => {},
      onDeleteFilter: () => {},
      removeAllFilters: () => {},
    };
    
    const areEqual = (prevProps, nextProps) => {
      return _.isEqual(prevProps, nextProps);
    };
    export default React.memo(FilterIndicators, areEqual);

You can see above example in which I'm using React.memo, useCallback for optimizing the app performance, it saved many re-rendering but be careful when using these optimization.