Duplicated document pages when after re-render in React's Strict mode

[sveggiani]

I've been looking into upgrading an internal component that uses the PdfLoader + PdfHighlighter (from an older version) to render a PDF with the intention to solve an issue that causes the pages to be rendered twice caused by React's Strict mode active on React v18.

I initially thought that this was due to being an older version on our side because the new example page uses React v18 and works fine. Then, I realized that the example page isn't using strict mode. When you wrap the app rendering with React.StrictMode, the same issue happens when you switch docs in the example page.

To reproduce it:

1. Clone the repo
2. Run the project in dev mode, check that everything works well
3. Wrap the app with strict mode in example/src/index.tsxexample/src/index.tsx. -> root.render(<React.StrictMode><App /></React.StrictMode>);
4. Verify that switching documents in the example page causes the documents to be rendered twice.

CleanShot.2024-11-14.at.14.35.58.mp4

Note: I've changed the first document to a shorter one for demo purposes.

I suspect that something isn't being re-initialized when the PdfHighlighter unmounts, but I've had no luck finding what.

Any ideas?

Thanks in advance,

[andresmv94]

Same here, any solution?