Page component is not reloading when PDF source changes.

[Rioos]

Before you start - checklist

• [x] I followed instructions in documentation written for my React-PDF version
• [x] I have checked if this bug is not already reported
• [x] I have checked if an issue is not listed in Known issues

Description It's not reloading Page component when dynamically changing pdf source.

On 3.0.5

// Component will recieve props
if (
      this.getPdf(nextProps, nextContext) !== this.getPdf() ||
      this.getPageNumber(nextProps) !== this.getPageNumber()
    )

How i think it might work (using lodash.eq)

// Component will recieve props
if (
      !eq(this.getPdf(nextProps, nextContext), this.getPdf()) ||
      this.getPageNumber(nextProps) !== this.getPageNumber()
    )

Steps to reproduce I'm using the system to load multiple Documents and load a small version of all its pages bellow that (just like the sample). When clicking on the small page it shows a preview of the clicked page. If I click on pages that has the same pageNumber but different documents, it doesn't update the preview component. It seems that it has a simple !== . This operation checks only for reference, and not for the equality of the object, since the reference inside the component is never changing, it evaluates to false every time. Check additional information

Expected behavior It should reload Page component when changing the source pdf.

Additional information When clicking on 1st page of pdf_sample_2 and then on 1st page of pdf_sample_1 it should render the preview from pdf_sample_1. *It works for different pageNumbers.

)

Environment

• Browser Chrome: 57
• React-PDF version: 3.0.5

[wojtekmaj]

Hey there @Rioos, thanks for report and sorry for delay. Would you please try react-pdf@next if you're running on React 16.3? I believe this should no longer be an issue on this version. I have put additional measures in form of automated tests to prevent that from happening in the future, too.

[Rioos]

I'll test this week and give you a feedback. Thanks!

[wojtekmaj]

Hello, any news on that? :)

[jritts]

I'm having a similar problem in which a Page doesn't update after changing the pdf source (in my case a blob) on the Document.

I noticed the html text layer DOES update as expected - just not the canvas layer. Same issue if I render w/ the svg option.

I'm using React v16.5.2.

The issue still happens using react-pdf@next (aka 4.0.0-beta.4)

[jritts]

Update: I can fix (or work around) the problem by having Page.getPdf() always return context.pdf, not (props.pdf || context.pdf).

[wojtekmaj]

In 4.0.0 we're not using old context API so this must be something else in your case...

[jritts]

I had temporarily moved to 4.0.0, to see if I could still reproduce the bug. The work around was done on the main branch.

[Nases]

I'm on v5.0.0 and react 17.0.1 & I use Next.js. I'm having the same issue. When I save the file, the pdf document does not get updated unless I refresh by hand.

[tudor2004]

Any news on this or any workarounds until there is a bugfix?

[wojtekmaj]

I'm not able to reproduce this, can anyone provide reproducible CodeSandbox?

Here's a starting point: https://codesandbox.io/s/react-pdf-bbgek

[bartosz-lobejko-trabr]

The same thing happens in my case.

@wojtekmaj I tried to modify your example but it seems like using Import instead of directly pdf URL prevent a bug to happens.

In my case, it also seems like it only happens when I change Document.file by the URL change, not by the local state.

[fabsway23]

hey i got a fix basically set a key value to the document and set the value to the source, so when the source changes the document will aswell

[bartosz-lobejko-trabr]

@fabsway23 that doesn't work for me. I even tried a similar trick on the Parent document and child Page component...

The internal state called PDF of Document component doesn't change on an update so it keeps loading, with no error or progress event being triggered.

[bartosz-lobejko-trabr]

I found a solution, not the elegant one but it works.

  const [url, setUrl] = useState(null);

  useEffect(async () => {
    if (url !== dataUrl) {
      await setDelay(300); // setTimeout
      setUrl(dataUrl);
    }
  }, [dataUrl]);

[wojtekmaj]

I tried to modify your example but it seems like using Import instead of directly pdf URL prevent a bug to happens.

Well you can use the URL in CodeSandbox too, why not!

[AlejandroPinto99]

I tried to solve it by setting the key value, and set that value to the source of the file. And it Worked! But now in console, I'm getting this:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.