Cannot use the same canvas during multiple render() operations

[zhangxl1025]

Attach (recommended) or Link to PDF file [here:]
pdfData.txt

Using latest pdfjs-dist version (4.0.269) I get the following error:

Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.

The code I am using for rendering is as follow:

export const Pdf = (props) => {
  const { pdfData, devicePixelRatio = 2, scale = 1 } = props;
  const [pageNumbers, setPageNumbers] = useState(1);

  const renderPDF = async (task) => {
    const pdf = await task.promise;
    setPageNumbers(pdf.numPages);

    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const viewport = page.getViewport({ scale });
      const outputScale = devicePixelRatio || 1;

      const canvas = document?.getElementById(`pageRender-${i}`);
      const context = canvas?.getContext("2d");
      canvas.width = Math.floor(viewport.width * outputScale);
      canvas.height = Math.floor(viewport.height * outputScale);
      canvas.style.width = Math.floor(viewport.width) + "px";
      canvas.style.height = Math.floor(viewport.height) + "px";

      const transform =
        outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;

      const renderContext = {
        canvasContext: context,
        viewport,
        transform,
      };
      page.render(renderContext);
    }
  };

  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument({
      url: `data:application/pdf;base64,${pdfData}`,
    });
    renderPDF(loadingTask);
  }, []);

  return (
    <div id="viewID" style={{ display: "flex", flexDirection: "column" }}>
      {Array.from({ length: pageNumbers }).map((item, index) => {
        return <canvas key={index + 1} id={`pageRender-${index + 1}`}></canvas>;
      })}
    </div>
  );
};

As you can see I create a new canvas for each page. So, I don't know why I still get such error.

What is going wrong?

[zhangxl1025]

Does anyone know the reason？

[ITsvetkoFF]

You may be using react 18 in strict mode which is fancy and running effects twice with the same state. You may check if this is the reason by removing strict mode or trying to build prod version of an app.