How to use the @wordpress/element.useMemo function in @wordpress/element

const TypographyControl = props => {
	// Compute the font size placeholder value.
	const placeholder = useMemo( () => {
		if ( typeof props.placeholder === 'function' ) {
			// If the placeholder is a function, this means that it's computed based on the detected default font size.
			return props.fontSize || Math.round( props.placeholder( getDefaultFontSize( props.htmlTag, true ) ) )
		}
		// Use the given placeholder, or use the detected font size.
		 return props.fontSize || props.placeholder || getDefaultFontSize( props.htmlTag, true )
	}, [ props.htmlTag, props.fontSize ] )

	return (

const useAddToCart = ( productId ) => {
	const { results: cartResults, isLoading: cartIsLoading } = useCollection( {
		namespace: '/wc/store',
		resourceName: 'cart/items',
	} );
	const currentCartResults = useRef( null );
	const { __experimentalPersistItemToCollection } = useDispatch( storeKey );
	const cartQuantity = useMemo( () => {
		const productItem = find( cartResults, { id: productId } );
		return productItem ? productItem.quantity : 0;
	}, [ cartResults, productId ] );
	const [ addingToCart, setAddingToCart ] = useState( false );
	const addToCart = useCallback( () => {
		setAddingToCart( true );
		// exclude this item from the cartResults for adding to the new
		// collection (so it's updated correctly!)
		const collection = cartResults.filter( ( cartItem ) => {
			return cartItem.id !== productId;
		} );
		__experimentalPersistItemToCollection(
			'/wc/store',
			'cart/items',
			collection,
			{ id: productId, quantity: 1 }

const QueryStringRouter = ( { paramName, defaultRoute, children } ) => {
	// Current route.
	const [ currentRoute, setRoute ] = useState( getParam( paramName ) );

	// Provider value.
	const providerValue = useMemo( () => {
		/**
		 * Functions that send the user to another route.
		 * It changes the URL and update the state of the current route.
		 *
		 * @param {string}  newRoute New route to send the user.
		 * @param {boolean} replace  Flag to mark if should replace or push state.
		 */
		const goTo = ( newRoute, replace = false ) => {
			updateQueryString( paramName, newRoute, replace );
			setRoute( newRoute );
		};

		if ( ! currentRoute ) {
			goTo( defaultRoute, true );
		}

export default function ReferenceItem({ item }: Props) {
    const title = useMemo(
        () => ({ __html: DOMPurify.sanitize(item.title || '') }),
        [item.title],
    );
    const authors = useMemo(() => CSLPerson.getNames(item.author, 3), [
        item.author,
    ]);
    const publication = useMemo(
        () =>
            firstTruthyValue(
                item,
                [
                    'journalAbbreviation',
                    'container-title-short',
                    'container-title',
                    'publisher',
                ],
                _x(
                    'n.p.',
                    'Abbreviation for "no publisher"',
                    'academic-bloggers-toolkit',

/**
 * External imports
 */
import { useMemo } from '@wordpress/element';
import { priceTypeModel } from '@eventespresso/model';

const { BASE_PRICE_TYPES } = priceTypeModel;

/**
 * @function
 * @param {number|string} ticketId
 * @param {Object} formData
 * @param {BaseEntity[]} prices,
 * @return {Array} price modifiers
 */
const useBasePrice = useMemo( ( prices ) => prices.find(
	( price ) => price.PRT_ID === BASE_PRICE_TYPES.BASE_PRICE
) );

export default useBasePrice;

}
			form.reset( event );
		},
		[ resetHandler, form.reset ]
	);
	const submitButton = useMemo(
		() => showSubmit ?
			 :
			null,
		[ showSubmit, submitButtonText, submitting, pristine, invalid ]
	);
	const cancelButton = useMemo(
		() => showCancel ?
			 :
			null,
		[ showCancel, cancelButtonText, formReset, submitting, pristine ]
	);
	return (
		<form>
			</form>

export default function ReferenceItem({ item }: Props) {
    const title = useMemo(
        () => ({ __html: DOMPurify.sanitize(item.title || '') }),
        [item.title],
    );
    const authors = useMemo(() => CSLPerson.getNames(item.author, 3), [
        item.author,
    ]);
    const publication = useMemo(
        () =>
            firstTruthyValue(
                item,
                [
                    'journalAbbreviation',
                    'container-title-short',
                    'container-title',
                    'publisher',
                ],
                _x(
                    'n.p.',
                    'Abbreviation for "no publisher"',
                    'academic-bloggers-toolkit',
                ),
            ),
        [

function BlockManagerCategory( {
	instanceId,
	category,
	blockTypes,
	hiddenBlockTypes,
	toggleVisible,
	toggleAllVisible,
} ) {
	const settings = useContext( EditPostSettings );
	const { allowedBlockTypes } = settings;
	const filteredBlockTypes = useMemo(
		() => {
			if ( allowedBlockTypes === true ) {
				return blockTypes;
			}
			return blockTypes.filter( ( { name } ) => {
				return includes( allowedBlockTypes || [], name );
			} );
		},
		[ allowedBlockTypes, blockTypes ]
	);

	if ( ! filteredBlockTypes.length ) {
		return null;
	}

	const checkedBlockNames = without(

function useStoryReducer() {
	const [ state, dispatch ] = useReducer( reducer, INITIAL_STATE );

	const {
		internal,
		api,
	} = useMemo( () => {
		const wrapWithDispatch = ( actions ) => Object.keys( actions )
			.reduce(
				( collection, action ) => ( { ...collection, [ action ]: actions[ action ]( dispatch ) } ),
				{},
			);

		return {
			internal: wrapWithDispatch( internalActions, dispatch ),
			api: wrapWithDispatch( exposedActions, dispatch ),
		};
	}, [ dispatch ] );

	return {
		state,
		internal,
		api,