Postmessage listener registered to late to receive messages

[alexander-schranz]

My remix application is embedded, the embedder sends me the data with postmessage. After the iframe is loaded a postmessage is send to the remix application:

        <iframe id="application-frame" src="example.org/remix"></iframe>
        <script>
            var frame = document.getElementById('application-frame');

            frame.onload = function() {
                frame.contentWindow.postMessage({some: 'data'}, '*'); // replace *
            }
        </script>

Inside the Remix application I'm listening to postmessage event:

export default function TemplateRoute() {
    const [data, setData] = useState(null);

    useEffect(() => {
        const messageHandler = (event: any) => {
            if (event.data) {
                setData(event.data);
            }
        }

        window.addEventListener('message', messageHandler);
        setData(window.lastData);

        return () => {
            window.removeEventListener('message', messageHandler);
        };
    }, []);
    
    
    if (!data) {
        <script>Wait for message: ...</script>
    }

The problem is that frame.onload is called before useEffect call I'm not sure how I can register that message listener before the frame onload is called without forcing a delay of the postmessage. I even tried <script> but that ended in hydration errors.