Hi,
I was experimenting with list views and noticed that the list view is too sensitive about the data source being malformed. The entire page freezes and is only momentarily responsive, additionally, it is not easy to quickly revert.
Context:
- Using Retool Cloud in Chrome browser
- I'm listing questions and answers in nested list views. (see image)
- As I'm experimenting, I define a temporary state ('test_data') to hold the JS object. (see image)
- I assign row counts and the text components as per this 'test_data' object, as you would expect.
^See the images at the bottom. This works fine.
Reproduce error:
Remove a comma (',') after the first 'createdAt' and have a malformed js object as 'test_data'. As such:
[
{
"description": "This is the question 1",
"createdAt": '2022-10-10 23:32' // removed ',' here
answers: ....
Result:
CPU goes up the roof. Memory went from 400 Mb to 2Gb.
It is difficult to change the text immediately, as clicks are not registered on the page, and keypresses are delayed or are also non-responsive.
Problem:
Some endless loop is probably triggered due to the malformed state being used with the list view. Furthermore, as you are writing the state, it is applied immediately, which means you will unavoidably have malformed JS at some point and get this error.
I'm not sure if I'm going about experimenting with listviews wrong before I transition to actual data. However, I'm sure it's not the intended behavior. It's also quite a convenient way to test components on fake data if it would have worked.
I have not tested malformed state variables with other components, this might not be related to list-views.
Best,
André