useEffect

[Pixelous]

Hi,

Can anyone please point me in a right direction how useEffect hook works?

The code is:

// Masonry
	const ref = useRef();

	const blockProps = useBlockProps( {
		className: clsx( className, 'has-nested-images' ),
		ref: ref,
	} );

useEffect( () => {
		if ( ! ref.current ) {
			return;
		}
		console.log( ref.current );
		return () => {
			console.log( 'deleted' );
		}
	}, [] );

After page updating is what I am seeing in a console:

ref.current
deleted
ref.current

Why 'deleted' is adding to the console if 'ref.current' exists?

Page-No-Title-.-Template-.-wordpress-local-.-Editor-.-WordPress.webm

Kind regards

[stokesman]

I think what you report is due to React’s StrictMode which runs some parts of your code twice to help surface bugs. In WordPress, StrictMode is active whenever either WP_DEBUG or SCRIPT_DEBUG are true. If you’re using wp-env that’ll be the case by default.

[Pixelous]

@stokesman ok, got it, DOM element outputs twice but what about 'deleted'?

return () => {
			console.log( 'deleted' );
		}

Should not it outputs only when a block is deleted?

[stokesman]

Should not it outputs only when a block is deleted?

That will also output if the effect runs again because cleanup functions run before the next effect run. Despite the empty dependency array, the effect may run again. StrictMode isn't the only way it can happen. A component may remount and all its effects run again due to something an ancestor does. For example, as of now in Gutenberg, while editing a post/page, toggling "Show template" or "Edit template" causes all blocks to remount (and their effects run again).

In such cases, its probably good to think of the component (block) as deleted and created anew even if it doesn't feel that way for a user. If something more specific to your intent isn't working perhaps you can provide more details.

[Pixelous]

@stokesman thanks for the explanation. Appreciate your help.

I was thinking to initialize Masonry js plugin first on mount and then only to update its instance when ordering images.

But looks this is not possible in Gutenberg because mount effect runs also when ordering images and then clicking 'Undo'.

useEffect( () => {
		if ( ! ref.current ) {
			return;
		}
		console.log( ref.current );
		return () => {
			console.log( 'deleted' );
		}
	}, [] );

So I ended up just to initialize Masonry js plugin every time image is ordering.

const ref = useRefEffect( ( element ) => {
		var msnry;
		if ( ! element ) {
			return;
		}
		const { ownerDocument } = element;
  		const { defaultView } = ownerDocument;
		imagesLoaded( element, function() {
			msnry = new defaultView.Masonry( element, {
				// options
				itemSelector: '.wp-block-image'
			});
		});
		return () => {
			msnry.destroy();
		}
	}, [ images ] );

This works but transition animations do not when ordering images.