[REACT] crudManager.load() sometimes freeze tab

Post by **mcarner5** » Thu Mar 21, 2024 4:09 pm

It should be attached to the email along with the zip. I will send it again just in case.

Post by **ghulam.ghous** » Thu Mar 21, 2024 8:03 pm

I have placed the .env file in the project root but still the same issue - nothing is loaded on the screen. Can you please recheck the project that you have sent to us.

Post by **mcarner5** » Thu Mar 21, 2024 8:26 pm

Hmm, that is strange. I sent over another zip of the repo, but I included the .env and updated the "dev" script to remove an unnecessary action.

How are you running this? I was able to get it up and going by doing this:

Unzip all files to same folder
```
npm install --legacy-peer-deps
```
```
npm run dev
```

Also, are you making it to the auth0 login screen, or does it not display that at all?

If you are still having trouble, let me know. I can hop in a zoom call and see what's going on. I am in CST timezone but I can make time for this.

Post by **ghulam.ghous** » Fri Mar 22, 2024 2:32 pm

Hi there,

Thanks for sending it again. I was able to run and debug it. Upon reducing the test case to minimum code to repro the issue, I was able to figure out that it is not an issue of load. It has something to do with most probably React. As the problem is only occuring when setting a date in selectedDate in useState var in handleNextDay click. Also the issue is not observed when I change the state var from date to string. It works as expected. So it was weird and need more debugging. So I have created a ticket here to further investigate this issue and fix it. https://github.com/bryntum/support/issues/8866.

Regards,
Ghous

Post by **mcarner5** » Fri Mar 22, 2024 11:35 pm

Thank you!! That indeed fixes the issue on my end. How strange that this is the cause.

Post by **ghulam.ghous** » Fri Mar 22, 2024 11:46 pm

Yup. It is indeed strange. But we need to debug more to see why this is happening, is it something that is reproducible in simple React demo etc. We will keep the ticket up to date and you can subscribe to it to keep track of updates.

Post by **kronaemmanuel** » Sun Mar 24, 2024 1:39 pm

Hi there,

I'm still investigating this, but as a workaround you can memoize your columns config, and put useCallback on handleNextDay function. That seems to get rid of the error.

Best Regards,
Krona

Post by **kronaemmanuel** » Thu Mar 28, 2024 3:36 pm

Hey there,

After investigating, I have found that the issue is due to the columns prop being set multiple times (on every component update) since it is inside the CustomScheduler component. Even if it is the same config, the reference to it's object changes on each update, so it gets updated. Please do one of the following:

Move the config outside the react component (a javascript variable), so it doesn't change reference, like in this example: https://bryntum.com/products/scheduler/examples/frameworks/react-vite/renderer-context/dist/ (Check the code for it in your download from customer zone's example folder: Scheduler\examples\frameworks\react-vite\renderer-context)
Put your config in a useState also, like in this example: https://bryntum.com/products/scheduler/examples/frameworks/react/javascript/react-events/build/ (Code in: Scheduler\examples\frameworks\react\javascript\react-events)

Regards,
Krona

Post by **mcarner5** » Sun Mar 31, 2024 3:31 am

I had a feeling it was something react related. I was able to move the columns portion of the config to a separate file and that seems to have solved the issue. Thanks for all the help on this.

Support Forum

[REACT] crudManager.load() sometimes freeze tab