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