useEffect function running after page refresh, how to avoid this?

[realthemes]

My useEffect function should running only if sidebarPosition attribute is changing (trigger to changing is transform variations), but when I refresh page after saving Editor blocks with content, function useEffect running again and recreate my blocks with overwriting empty content, is there the elegant method to avoid this?

const { replaceInnerBlocks } = useDispatch(blockEditorStore);
		
	useEffect( () => {
		console.log('useEffect is running')
		let newInnerBlocks;
		
		switch ( sidebarPosition ) {
  			case 'none':
    			newInnerBlocks = [createBlock('unior-blocks/unior-section-content')];
    		break;
  			case 'left':
				newInnerBlocks = [createBlock('unior-blocks/unior-section-content'),createBlock('unior-blocks/unior-section-sidebar')];
    		break;
  			case 'right':
				newInnerBlocks = [createBlock('unior-blocks/unior-section-content'),createBlock('unior-blocks/unior-section-sidebar')];
			break;
		}
		replaceInnerBlocks( clientId, newInnerBlocks );
}, [ sidebarPosition ] );

[t-hamano]

Hi @realthemes

If the attributes are selectable by the user, how about using the onChange event? Perhaps something like this.

export default function Edit( { setAttributes, clientId } ) {
	const { replaceInnerBlocks } = useDispatch( blockEditorStore );

	const createNewInnerBlocks = ( value ) => {
		let newInnerBlocks;
		// ...
		replaceInnerBlocks( clientId, newInnerBlocks );
	};
	return (
		<SelectControl
			// ...
			onChange={ ( value ) => {
				setAttributes( { sidebarPosition: value } );
				createNewInnerBlocks( value );
			} }
		/>
	);
}

[realthemes]

Good solution, thank you again, however I'm trying to implement layout switching with transform variations buttons, look at screenshot:

I didn't find a solution why useEffect running on page restart, but I change my code to check if sidebar block presented as section inner block before adding it or removing, this solved the problem with overwriting blocks during transformation, here is my code:

// Transform variations
const { replaceInnerBlocks } = useDispatch(blockEditorStore);
useEffect( () => {
	// Get all inner blocks of selected unior-section block
	const currentInnerBlocks = select( blockEditorStore ).getBlocks( clientId );

	if ( sidebarPosition === 'none' ) {
		// Remove unior-section-sidebar inner block from unior-section block
		const updatedInnerBlocks = currentInnerBlocks.filter(
			( block ) => block.name !== 'unior-blocks/unior-section-sidebar'
		);
		// Replace updated inner blocks
		replaceInnerBlocks( clientId, updatedInnerBlocks );
	} else if ( sidebarPosition === 'left' || sidebarPosition === 'right' ) {
		// Check if unior-section-sidebar block exist in unior-section block
		const hasSidebarBlock = currentInnerBlocks.some(
			( block ) => block.name === 'unior-blocks/unior-section-sidebar'
		);
		// If unior-section-sidebar block is not exist in unior-section block 
		// then add it next to unior-section-content block
		if ( !hasSidebarBlock ) {
			const sidebarBlock = createBlock( 'unior-blocks/unior-section-sidebar' );
			const updatedInnerBlocks = [ ...currentInnerBlocks, sidebarBlock ];
			// Replace updated inner blocks
			replaceInnerBlocks( clientId, updatedInnerBlocks );
		}
	}
}, [ sidebarPosition ]);