/**
 * External dependencies.
 */
import { useInstanceId } from '@wordpress/compose';
import { memo, useEffect } from '@wordpress/element';

/**
 * Internal dependencies.
 */
import QueryContent from './query-content';

/**
 * The Editor Block render.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const {
		attributes: { queryId },
		setAttributes,
	} = props;

	// Generate a unique instance ID for this block.
	const instanceId = useInstanceId( QueryContent );

	// We need this for multi-query block pagination.
	// Query parameters for each block are scoped to their ID.
	useEffect( () => {
		if ( ! Number.isFinite( queryId ) ) {
			setAttributes( { queryId: instanceId } );
		}
	}, [ queryId, instanceId, , setAttributes ] );

	return <QueryContent { ...props } />;
};

export default memo( Render );
