very slow rendering with high number of pages

[astahmer]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

hey, first I wanted to thank you for this lib, it has been a bit rough to setup with vite + a webworker but a pleasure to use it afterwards 🙏

context

I first noticed this in a real-world use-case on a private repo, but I can reproduce it easily in the online playground
when rendering (=not especially on the screen, in my private repo we're generating the pdf with await pdf(element).toBlob(); so we can download it directly) a high number of pages, the pdf exponentially gets worse (and memory also seems to grow till there's none)

tested on a mac m1 with 16go ram with a pdf of around 250 pages, sometimes it's fine after 5mins sometimes it crashes cause of memory

Steps to reproduce

• on the online playground, line 248, you can replace const experienceData = ... with

const experienceData = Array(100).fill(0).map(((x, i) => ({
    company: "Jedi Temple, Coruseant",
    date: "A long time ago...",
    details: [
      "Started a new Jedi Temple in order to train the next generation of Jedi Masters",
      "Discovered and trained a new generation of Jedi Knights, which he recruited from within the New Republic",
      "Communicates with decesased Jedi Masters such as Anakin Skywalker, Yoda, Obi-Wan Kenobi in order to learn the secrets of the Jedi Order",
    ],
    position: "Head Jedi Master",
  })))

• this renders fine with 45 pages & generation time: 1397, which is not great but fine
• then you can update (at line 248 still) to Array(200) to x2 the input, the result is still fine generation time: 3753 with 86 pages total, so the time spent is actually x2.68 even tho the input is just x2
• Array(300) -> generation time: 7215, input x3, time spent to get output = x5 instead of x3, 129 pages total
• Array(400) -> generation time: 12255, input x4, time spent to get output = x8.7 instead of x4, 175 pages total
• Array(500) -> generation time: 19178, input x5, time spent to get output = x13.7 instead of x5, 214 pages total
• Array(600) -> 21263 + fatal error, but I guess it's about 42 pages more so around 250... which is also where I initially reproduced this bug on my workplace private repo

Expected behavior

render the pdf after X seconds or maybe a minute at most

Actual behavior

either takes way too long (minutes) or just crashes

Additional information

meanwhile I tried jspdf and it can generate a 6000 pages pdf in about 10s in my browser, so I supposed this has nothing to do with the number of pages
I get that react-pdf is doing a lot more computation whereas jspdf has no autolayout, but still this is acting a bit weird

Environment

• Browser (if applicable): latest Chrome on mac
• React-PDF version: tried both 2.3 & 3.0.2, same result
• React version: 18.0.2
• Webpack version (if applicable): using vite 3.0.2

[wojtekmaj]

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.

[astahmer]

oh wow indeed, sorry about that 😅