I am stuck at one frontend problem and wanted to know if you have faced any ever.
So the problem is I have a huge HTML (> 3 MB) to render into my DOM. However , if I do it altogether the DOM crashes.
I also need to DOM Purify & parse it before rendering it.
I tried splitting it into chunks and rendering but that breaks the HTML being rendered.
The problem cant be solved using lazy loading or so because the HTML chunk I am getting altogether from a presigned URL link.

I was trying if I could break it into chunks and re-render react everytime the array is upadted with the new chunk .

Something like this.

    useEffect(() => {
        if (emailBody) {
            const chunkSize = 1000; // Adjust chunk size as needed
            for (let i = 0; i < emailBody.length; i += chunkSize) {
                console.log('emailbody', emailBody.slice(i, i + chunkSize));
                setTimeout(() => {
                setBodyChunks((bodyChunks) => [...bodyChunks, emailBody.slice(i, i + chunkSize)]);
                }, 100);
            }
        }
    }, [emailBody]);

And render it like

                          <div onClick={(e) => handleEmailPreviewClick(e)} className={'email-preview--body'}>
                                {bodyChunks.map((chunk, index) => (
                                    <div key={index}>{parse(DOMPurify.sanitize(chunk))}</div>
                                ))}
                            </div>