Difference between React.useCallBack, React.useMemo and React.Memo with examples? - reactjs

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.