This content originally appeared on DEV Community and was authored by Hossain MD Athar
If, in 2025, anyone is facing the same issue with react-pdf causing excessive bundle size or initial page load lag, you can try the following approach. Instead of using React.lazy() (which is for JSX components), I'm using standard dynamic imports for the required functions and components. This ensures they are imported and processed only when the PDF button is clicked, not on every page render. This solves the performance and bundle size issues.
const handleGeneratePdf = async () => {
if (!ticket || !company) return;
try {
const { pdf } = await import("@react-pdf/renderer");
const { default: CertiPdf } = await import("../CertPdf");
// Generate PDF blob
const blob = await pdf(<CertPdf company={company} ticket={ticket} />).toBlob();
// Create URL for viewing/printing
const url = URL.createObjectURL(blob);
setPdfUrl(url);
} catch (error) {
console.error("Error generating PDF:", error);
}
};
This content originally appeared on DEV Community and was authored by Hossain MD Athar
Hossain MD Athar | Sciencx (2025-11-19T06:35:56+00:00) Answer: React-PDF Slow Performance with large PDF, reneders unneccessarily.. Retrieved from https://www.scien.cx/2025/11/19/answer-react-pdf-slow-performance-with-large-pdf-reneders-unneccessarily/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.