WordPress React hooks. Example code from this post https://pluginmachine.com/creating-reusable-react-hooks-for-the-wordpress-block-editor-or-whatever/

checkConnection.js

//https://raw.githubusercontent.com/imaginarymachines/ufo-ai-wp/75803f4a44158a51f9f77b740ae4065417492d0e/src/api/checkConnection.js
import React from 'react';
import apiFetch from '@wordpress/api-fetch';
const checkConnection = async () => {
	const is = await apiFetch( {
		path: '/ufo-ai/v1/connected',
		method: 'GET',
	} )
		.then( ( res ) => {
			if ( res ) {
				return res.connected;
			}
			return false;
		} )
		.catch( () => {
			return false;
		} );
	return is;
};

export const useConnectionCheck = () => {
	const [ connected, setConnected ] = React.useState( false );
	const [ checking, setChecking ] = React.useState( false );
	React.useEffect( () => {
		setChecking( true );
		checkConnection().then( ( is ) => {
			setConnected( is );

			setChecking( false );
		} );
	}, [] );
	return { connected, isCheckingConnection: checking };
};
export default checkConnection;

usePages.js

import { useSelect } from '@wordpress/data';
const usePages = () => {
	const pages = useSelect((select) => {
	 	let data = select('core').getEntityRecords('postType', 'pages', {
			per_page: 50,
		});
		if( ! data ) {
			return [];
		}
		return data;
	});
	return {page};
};

usePagesAsOptions.js

import { useSelect } from '@wordpress/data';
const usePagesAsOptions = () => {
	const pages = useSelect((select) => {
	 	let data = select('core').getEntityRecords('postType', 'pages', {
			per_page: 50,
		});
		if( ! data ) {
			return [];
		}
		return data.map((page) => {
			return {
				label: page.title.rendered,
				value: page.id,
			};
		});
	});
	return {pages};
};

useParentBlockAttributes.js

import { useSelect } from '@wordpress/data';

/**
 * Get attributes of the parent block
 *
 * @param  clientId
 */
export const useParentBlockAttributes = (clientId) => {
	const parentClientId =
		select('core/block-editor').getBlockHierarchyRootClientId(clientId);

	return select('core/block-editor').getBlockAttributes(parentClientId);
};

usePostTypeOptions.js

import { useSelect } from '@wordpress/data';
const usePostTypeOptions = ({postType) => {
	const options = useSelect((select) => {
	 	let data = select('core').getEntityRecords('postType', postType, {
			per_page: 50,
		});
		if( ! data ) {
			return [];
		}
		return data.map((post) => {
			return {
				label: post.title.rendered,
				value: post.id,
			};
		});
	});
	return {options};
};

useSettings.js

import React from 'react';
import apiFetch from '@wordpress/api-fetch';

//Function for saving settings
const saveSettings = async ( values ) => {
	const r = await apiFetch( {
		path: '/ufo-ai/v1/settings',
		method: 'POST',
		data: values,
	} ).then( ( res ) => {
		return res;
	} );
	return { update: r };
};

/**
 * Hook for saving settings
 *
 * @returns {Object} {saveSettings: function, isSaving: boolean, hasSaved: boolean}
 */
export const useSettings = () => {
	const [ isSaving, setIsSaving ] = React.useState( false );
	const [ hasSaved, setHasSaved ] = React.useState( false );

	//Reset the isSaving state after 2 seconds
	React.useEffect( () => {
		if ( hasSaved ) {
			const timer = setTimeout( () => {
				setIsSaving( false );
			}, 2000 );
			return () => clearTimeout( timer );
		}
	}, [ hasSaved ] );
	return {
		saveSettings: ( values ) => {
			setIsSaving( true );
			saveSettings( values ).then( () => {
				setIsSaving( false );
				setHasSaved( true );
			} );
		},
		isSaving,
		hasSaved
	};
};
export default useSettings;