Custom widget preview doesn't execute react useEffect or useCallback

[nextjs, custom widget, react hooks]

When creating a custom component one can write a hook and use the useEffect to say manage how the component finally looks, behaves.

However, when this component is rendered in the netlify cms preview its javascript doesn’t execute. I presume this is because the javascript itself isn’t embedded into the preview iFrame.

So how does one go about allowing ones custom react hook component to execute its javascript when rendered in the preview?

admin.tsx

...
// @ts-ignore
            cms.registerEditorComponent(BannerBlockEditorComponent);
...

bannerBlockEditorComponent.tsx

...
toPreview: function (obj) {
        return (
            <BannerBlock data={obj}></BannerBlock>
        );
    }
...

BannerBlock.tsx

import React, {useCallback, useEffect} from 'react'
import styles from '@/design-system/components/BannerBlock.module.scss'
import Button from "@/components/Button";

interface BannerBlockProps{
    data?:string;
    children?: React.ReactNode;
    className?: any;
};
const  BannerBlock = ({children, data}:BannerBlockProps) => {
    const handleClick = useCallback(
        () => {
            console.log('Click happened. but not in preview!');
        },
        [],
    );

    data = decodeURI(data);
    useEffect(()=>{
        console.log("use Effect runs in preview. oh no it doesn't.");
    })
    return <div>
        {children}
        <Button onClick={handleClick}>TestButton</Button>
    </div>
}

export default BannerBlock

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!