Hi!
I am having an issue that I really dont seem to find a solution for.
What I am trying to do: Display a lot of real- time (or semi- realtime) data on a page/element.
How I do it now: I am using a supabase plugin to fetch data from the supabase database, then when fetched I set a state in my app with that list og things. The “thing” is created by creating a dummy API connector object type and setting that in the Supabase plugin. To display the data i do a bunch of #item numer or :filtered iterations on the state list.
The issue : The memory in the client browser gets enormous very quick. And it is only happening when i set the state with the list of things in my app. It does not happen when I fetch the items, only when I set the list and the :filtered and #item_number text elements is populated.
The wierd thing is that I can see that the js garbage collector cannot clean out the “old” data. I can fetch and get an updated list of things, and when i set the state with the new list the memory just increases and the old data does not dissappear. They are saved as strings.
What I have tried: Just about anything I can think of. Instead of using the supabase plugin i have tried just using the regular API fetch to the supabase db. I have tested with different plugins. I have also tested storing the data in a bubble.io db table and doing Search for:first item: This helps, and does not increase the heap memory, but the WU usage is just too expensive when updating the bubble.io db. Its just not scalable at all.
Directly refering to the supabase db or the bubble api data type db is not working either.
It seems to me that there is something about API objects that the garbage collector does not like, and therefor does not clean out when finished using.
Memory increase for a supabase db of 157 entries: 15 mb per new set of state
Memory increase for a supabase db of 2500 entries: 35 mb per new set of state
A lot of fetches eventually lead to tab crashing.
Any help with this would be much appreciated.
Best regards, André