Re-rendering issue with PDFs in React

Question

const [numPagesState, setNumPagesState] = useState(0);
const allCertificates = formik?.values?.certificate_file || [];

{allCertificates?.length > 0 &&
   allCertificates?.map((el) => {
     return (
       <>
         <div>
           <div className="d-flex justify-content-between edit-delete-section">
             <div className="course-completion">
               Course Completion Certificate
             </div>
             <div className="d-flex">
               <div
                 onClick={() => {
                   setSelectedPreview(el);
                   setOpenCertificateModal(true);
                 }}
               >
                 <Edit className="EditIcon cursor-pointer" />
               </div>
               <div
                 onClick={() => {
                   setDeleteCertificateModal(true);
                 }}
               >
                 <Delete className="delete-button cursor-pointer" />
               </div>
             </div>
           </div>

           <div className="document-preview-form" ref={resizeRef}>
             <Document
               file={el?.file_url || "/blank.pdf"}
               onLoadSuccess={({ numPages }) =>
                 setNumPagesState(numPages ?? 0)
               }
             >
               {Array?.apply(null, Array(numPagesState))
                 ?.map((x, i) => i + 1)
                 ?.map((page) => (
                   <Page
                     key={page}
                     width={width ? width : 1}
                     pageNumber={page}
                   />
                 ))}
             </Document>
           </div>
         </div>
       </>
     );
   })}

I am getting the error:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I am expecting my PDF files to load one below the other, since I used the map method.

"Can someone please help me?" is completely unnecessary to explicitly put into the title of a question. It is implicit in every question asked on Stack Overflow that you want someone to help you. — Wyck
– Wyck, Commented Nov 15, 2024 at 5:23
Review what you want to do for onLoadSuccess method of Document and don't use states unless necessary. Currently its Render -> state update -> re-render -> state Change ----, If you avoid this pattern, this won't happen. — Vipin Yadav
– Vipin Yadav, Commented Nov 18, 2024 at 5:18

stickynotememo · Accepted Answer · 2024-11-18 05:09:11Z

1

Instead of useState try useRef as it avoid re-renders: const numPagesState = useRef(0);

and then you can use the .current method to assign values:

numPagesState.current = numPages

edited Nov 18, 2024 at 5:09

stickynotememo

1771 silver badge15 bronze badges

answered Nov 15, 2024 at 2:37

NOMAN MALIK

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Re-rendering issue with PDFs in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related