or this preferable?

const placeholder = useMemo( () => ( <PlaceholderPreview /> ) , [] );

The is a third option in

import { memo } from 'react';

const placeholder = memo( <Placeholder /> );

It might be worth it to wrap placeholder-preview.js itself with memo, as it is a display component that shouldn't change between re-renders.

export default memo( PlaceholderPreview );

I think using one of the memo functions will make it easier to scan and understand.

Good suggestion @vcanales! However while testing it looks like the HoC memo doesn't appear to work this this context. I'll try the useMemo line next.

Nice it looks like useMemo does the trick too

Verified that there's a different top reason for re-renders ✨ Thanks @Mamaduka and @vcanales