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

function NavigationMenuItemEdit( {
	attributes,
	isSelected,
	isParentOfSelectedBlock,
	setAttributes,
} ) {
	const plainTextRef = useRef( null );
	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
	const [ isEditingLink, setIsEditingLink ] = useState( false );
	const [ urlInput, setUrlInput ] = useState( null );

	const inputValue = urlInput !== null ? urlInput : url;

	const onKeyDown = ( event ) => {
		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
			event.stopPropagation();
		}
	};

	const closeURLPopover = () => {
		setIsEditingLink( false );
		setUrlInput( null );

export default function FinishButton( { className, onClick, children } ) {
	const button = useRef( null );

	// Focus the button on mount if nothing else is focused. This prevents a
	// focus loss when the 'Next' button is swapped out.
	useLayoutEffect( () => {
		if ( document.activeElement === document.body ) {
			button.current.focus();
		}
	}, [ button ] );

	return (
		<button></button>

const inputValue = urlInput !== null ? urlInput : url;

	const onKeyDown = ( event ) => {
		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
			event.stopPropagation();
		}
	};

	const closeURLPopover = () => {
		setIsEditingLink( false );
		setUrlInput( null );
		setIsLinkOpen( false );
	};

	const autocompleteRef = useRef( null );

	const onFocusOutside = ( event ) => {
		const autocompleteElement = autocompleteRef.current;
		if ( autocompleteElement && autocompleteElement.contains( event.target ) ) {
			return;
		}
		closeURLPopover();
	};

	const stopPropagation = ( event ) => {
		event.stopPropagation();
	};

	const { label, url } = attributes;
	let content;
	if ( isSelected ) {

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',

function ImageDisplay( { id, src, origRatio, width, height, scale, focalX, focalY } ) {
	const imageRef = useRef( null );

	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
	const imgProps = getImgProps( width, height, scale, focalX, focalY, origRatio );

	useTransformHandler( id, ( transform ) => {
		const target = imageRef.current;
		if ( transform === null ) {
			target.style.transform = '';
		} else {
			const { resize } = transform;
			if ( resize[ 0 ] !== 0 && resize[ 1 ] !== 0 ) {
				const newImgProps = getImgProps( resize[ 0 ], resize[ 1 ], scale, focalX, focalY, origRatio );
				target.style.cssText = getImageWithScaleCss( newImgProps );
			}
		}
	} );

const {
		media,
		isCopying,
		isLoading,
		pageHandle,
		className,
		multiple,
		setPath,
		nextPage,
		onCopy,
	} = props;
	const [ selected, setSelected ] = useState( [] );
	const [ focused, setFocused ] = useState( -1 );

	const columns = useRef( -1 );
	const gridEl = useRef( null );

	const select = useCallback(
		newlySelected => {
			let newSelected = [ newlySelected ];

			if ( newlySelected.type === 'folder' ) {
				setPath( newlySelected.ID );
			} else if ( multiple ) {
				newSelected = selected.slice( 0, MAX_SELECTED - 1 ).concat( newlySelected );

				if ( selected.find( item => newlySelected.ID === item.ID ) ) {
					newSelected = selected.filter( item => item.ID !== newlySelected.ID );
				}
			} else if ( selected.length === 1 && newlySelected.ID === selected[ 0 ].ID ) {
				newSelected = [];
			}

function FillComponent( { name, children, registerFill, unregisterFill } ) {
	const slot = useSlot( name );

	const ref = useRef( {
		name,
		children,
	} );

	if ( ! ref.current.occurrence ) {
		ref.current.occurrence = ++occurrences;
	}

	useLayoutEffect( () => {
		registerFill( name, ref.current );
		return () => unregisterFill( name, ref.current );
	}, [] );

	useLayoutEffect( () => {
		ref.current.children = children;
		if ( slot && ! slot.props.bubblesVirtually ) {

function SelectionCanvas( { children } ) {
	const {
		actions: { clearSelection },
	} = useStory();
	const {
		state: { pageContainer },
		actions: { clearEditing, selectIntersection },
	} = useCanvas();

	const overlayRef = useRef( null );
	const lassoRef = useRef( null );
	const offsetRef = useRef( [ 0, 0 ] );
	const startRef = useRef( [ 0, 0 ] );
	const endRef = useRef( [ 0, 0 ] );
	const lassoModeRef = useRef( LassoMode.OFF );

	const getLassoBox = () => {
		const [ x1, y1 ] = startRef.current;
		const [ x2, y2 ] = endRef.current;
		const x = Math.min( x1, x2 );
		const y = Math.min( y1, y2 );
		const w = Math.abs( x1 - x2 );
		const h = Math.abs( y1 - y2 );
		return [ x, y, w, h ];
	};

	const updateLasso = () => {
		const lasso = lassoRef.current;
		if ( ! lasso ) {

export default function HistoryHandler( { children } ) {
	const ref = useRef();
	const { undo, redo } = useDispatch( 'core/editor' );

	useEffect( () => {
		const onBeforeInput = ( event ) => {
			if ( event.inputType === 'historyUndo' ) {
				event.preventDefault();
				undo();
			} else if ( event.inputType === 'historyRedo' ) {
				event.preventDefault();
				redo();
			}
		};

		ref.current.addEventListener( 'beforeinput', onBeforeInput );

		return () => {

export function SupportedTemplatesVisibility() {
	const { editedOptions } = useContext( Options );

	const { all_templates_supported: allTemplatesSupported, reader_theme: readerTheme, theme_support: themeSupport } = editedOptions || {};

	const supportedPostTypesTitle = useRef( document.querySelector( '#all_templates_supported_fieldset, #supported_post_types_fieldset > .title' ) );
	const supportedPostTypesFieldset = useRef( document.getElementById( 'supported_post_types_fieldset' ) );
	const supportedTemplatesFieldset = useRef( document.getElementById( 'supported_templates_fieldset' ) );
	const supportedTemplateInputs = useRef( [ ...document.querySelectorAll( '#supported_templates_fieldset input[type=checkbox]' ) ] );

	/**
	 * Show/hide settings features depending on options on the page.
	 */
	useEffect( () => {
		supportedPostTypesTitle.current.classList.toggle(
			'hidden',
			'reader' === themeSupport,
		);

		let supportedPostTypesHidden = allTemplatesSupported;
		if ( 'reader' === themeSupport && 'legacy' === readerTheme ) {
			supportedPostTypesHidden = false;
		}
		supportedPostTypesFieldset.current.classList.toggle(
			'hidden',