UploaderComponent stops working after state update

[Josef]

Hello, I have a problem with the upload component. When I change the state of another component on the page (for example <input type="text">), the upload component doesn't work anymore (see below). How could this be fixed? Thank you.

[Yohapuja Selvakumaran]

Hi Jose

Thank you for reaching out to us.

We have carefully validated your requirement and created a sample based on the code snippet you shared, specifically within a Next.js app. However, we were unable to replicate the issue with the UploaderComponent after updating the input field value and the uploader component is working as expected Please check the sample and the provided GIF for further reference:

Sample:
https://stackblitz.com/edit/nextjs-5ntmct?file=styles%2Fglobals.css,pages%2Findex.js,package.json

To further assist us in replicating the reported issue, we kindly request the following details:

1. Could you please let us know the Syncfusion package version you are currently using?
2. Are you experiencing this issue only in your Next.js app, or does it occur in a simple React app as well?
3. If possible, could you modify the shared sample to help us replicate the reported issue on our end?

We suspect that the issue might be caused by the re-rendering of the child component (UploaderComponent) when the parent component's state (from the textbox) changes. To prevent unnecessary re-renders of the UploaderComponent, we suggest wrapping it in React.memo. This will ensure that the uploader will only re-render if its props change.

 

const MemoizedUploader = memo(() => {

  const asyncSettings = {

    saveUrl:

      'https://services.syncfusion.com/react/production/api/FileUploader/Save',

  };

  return (

    <UploaderComponent

      asyncSettings={asyncSettings}

      autoUpload={false}

      multiple={false}

    />

  );

});

 

export default function Home() {

  const [textvalue, settextvalue] = useState('');

 

  const handleTextChange = (event) => {

    settextvalue(event.target.value);

  };

 

  return (

    <div className="control-pane" style={{ marginTop: '150px' }}>

      <div className="control-section input-content-wrapper">

        <div className="row custom-margin material">

          <b>Test Text Box</b>

        </div>

        <div className="row custom-margin custom-padding-5">

          <div>

            <input

              type="text"

              className="e-input"

              value={textvalue}

              onChange={handleTextChange}

            />

          </div>

 

          <br />

          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">

            <MemoizedUploader />

          </div>

        </div>

      </div>

    </div>

  );

}

 

 

You can also explore our updated sample:

Sample: https://stackblitz.com/edit/nextjs-xv3ytr?file=styles%2Fglobals.css,pages%2Findex.js,package.json

Please let us know if the above suggestion is helpful for you or If you continue to experience the issue, please share the requested details so we can assist you further.

Regards,

Yohapuja S

[Alan Fair]

Hi Yohapuja,

thank you very much for your reply.

I'm using version 27.1.48. I can see that the example worked in Stackblitz, so it seems the problem is specific to my local setup, but I haven't been able to identify what exactly is causing it. But wrapping the component in a memo function worked. Thank you for your assistance!

[Kalpana Ganesan]

Hi Josef,

You're welcome! Glad that the provided solution was helpful. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.