Performance issue on BlockListBlock filter

[tomektomczuk]

I build component that allow to set margin and padding but for some reasons when I add it to the core/group block that we use a lot it slow down the editor responsiveness by a lot. Any idea what am I doing incorrectly?

const addMarginPaddingDataAttributes = createHigherOrderComponent(
	( BlockListBlock ) => {
		return ( props ) => {
			if ( ! allowedBlocks.includes( props.name ) ) {
				return <BlockListBlock { ...props } />;
			}

			const marginsProps = props.attributes.margins;
			const paddingsProps = props.attributes.paddings;

			const prepareData = (
				property,
				breakpoint,
				attribute,
				attributeSlug,
				resultArr
			) => {
				if (
					property[ breakpoint ][ attribute ] &&
					property[ breakpoint ][ attribute ] !== '-'
				) {
					const startValue = `${ breakpoint }:${ attributeSlug }`;
					const fullValue = `${ startValue }-${ property[ breakpoint ][ attribute ] }`;
					// eslint-disable-next-line array-callback-return
					const matchIndex = resultArr.findIndex( ( element ) => {
						if ( element.includes( startValue ) ) {
							return true;
						}
					} );
					if ( matchIndex !== -1 ) {
						resultArr[ matchIndex ] = fullValue;
					} else {
						resultArr.push( fullValue );
					}

					if ( attribute.indexOf( 'margin' ) === 0 ) {
						props.setAttributes( {
							finalMargins: resultArr.join( ' ' ).trim(),
						} );
					} else {
						props.setAttributes( {
							finalPaddings: resultArr.join( ' ' ).trim(),
						} );
					}
				} else if ( property[ breakpoint ][ attribute ] === '-' ) {
					const startValue = `${ breakpoint }:${ attributeSlug }`;

					// eslint-disable-next-line array-callback-return
					const matchIndex = resultArr.findIndex( ( element ) => {
						if ( element.includes( startValue ) ) {
							return true;
						}
					} );
					if ( matchIndex !== -1 ) {
						resultArr.splice( matchIndex, 1 );
					}

					if ( attribute.indexOf( 'margin' ) === 0 ) {
						props.setAttributes( {
							finalMargins: resultArr.join( ' ' ).trim(),
						} );
					} else {
						props.setAttributes( {
							finalPaddings: resultArr.join( ' ' ).trim(),
						} );
					}
				}
			};

			useEffect( () => {
				breakpointSlugs.forEach( ( slug ) => {
					prepareData(
						marginsProps,
						slug,
						'marginTop',
						'mt',
						marginsResult
					);
					prepareData(
						marginsProps,
						slug,
						'marginRight',
						'mr',
						marginsResult
					);
					prepareData(
						marginsProps,
						slug,
						'marginBottom',
						'mb',
						marginsResult
					);
					prepareData(
						marginsProps,
						slug,
						'marginLeft',
						'ml',
						marginsResult
					);
					prepareData(
						paddingsProps,
						slug,
						'paddingTop',
						'pt',
						paddingsResult
					);
					prepareData(
						paddingsProps,
						slug,
						'paddingRight',
						'pr',
						paddingsResult
					);
					prepareData(
						paddingsProps,
						slug,
						'paddingBottom',
						'pb',
						paddingsResult
					);
					prepareData(
						paddingsProps,
						slug,
						'paddingLeft',
						'pl',
						paddingsResult
					);
				} );
			}, [ props ] );

			let wrapperProps = props.wrapperProps;
			wrapperProps = {
				...wrapperProps,
				'data-margin': props.attributes.finalMargins,
				'data-padding': props.attributes.finalPaddings,
			};
			return (
				<BlockListBlock { ...props } wrapperProps={ wrapperProps } />
			);
		};
	},
	'addMarginPaddingDataAttributes'
);

addFilter(
	'editor.BlockListBlock',
	'custom/add-data-attributes',
	addMarginPaddingDataAttributes
);