Approach 1

To align with your React version 18, ensure that you upgrade to the latest version of react-pdf. For React versions 16.8 and above, it is recommended to use the most recent version of react-pdf.

NOTE:
Determine the recommended React-PDF version based on your React version.

  • For React version 16.8 and newer, the recommended React-PDF version is the latest release.
  • If using React version 16.3 or newer but less than 16.8, it is recommended to use React-PDF version 5.x.
  • If using React version 15.5 or newer but less than 16.3, the recommended React-PDF version is 4.x.

Approach 2

By specifying renderMode=”svg”, you instruct react-pdf to utilize SVG mode for PDF rendering. SVG rendering typically consumes less memory than canvas rendering.

<Document
  file={pdfBlob}
  onLoadSuccess={onDocumentLoadSuccess}
  renderMode="svg" // Set render mode to SVG
  // Other props...
>
  {/* Other components... */}
</Document>

Moreover, it is recommended to compress large PDFs or those containing image-heavy content to avoid potential errors caused by extended loading times.

Need Help With React Development?

Work with our skilled React developers to accelerate your project and boost its performance.

Hire Reactjs Developers

Support On Demand!

Related Q&A