[Solid] Performance issue with large form?
Hi there,
I made a simplified reproduction of a current form I'm working on:
https://stackblitz.com/edit/solid-tanstack-form-perf?file=src%2Fform.tsx
Steps to reproduce:
1. Click on
+ Plus to add new lines (it adds 10 to fasten the test)
2. Select an option in the first column on line 5
3. Delete the first line by clicking on - Remove: the line is deleted and your selection is shifted as expected, and smoothly
4. Click several time on + Plus (after 30 lines you will start to feel the lag)
5. Delete the first line: now the feeling is less smooth, it might even take a long time (depending on how many lines you created)
How can I improve that? Can I improve that? Did I hit some known limitations?
The form I'm working on have 20+ columns, several of them having a select box. Some are even interlinked (one selection will filter the options of another column).8 Replies
flat-fuchsiaOP•5mo ago
I created the same form using solid store. You just have to comment + uncomment two lines in the index.tsx file:
when using store, the perf are good.
Surely TanStack is doing a ton of stuff/verification store are not !
What should I be aware off, and what can I tweak/turn off to improve this ?
magic-amber•5mo ago
removing an element requires the meta to shift, so that probably has linear performance
multiple-amethyst•5mo ago
Can you add
[Solid] to the start of the name of the Thread here in Discord? - might make it easier to discover for others (most questions are react related)flat-fuchsiaOP•5mo ago
Yes, I wonder if we can improve that. I'll move on with store for this form for now, but I hope I can go back to tanstack form and try to improve that somehow
do you think I should open a gh issue, or is it just life and nothing to do about it?
magic-amber•5mo ago
it‘s an inherent problem with how meta is stored and array shifts
so unless your data structure changes to one where removing is easier, I don‘t see it happening
flat-fuchsiaOP•5mo ago
mmh ok i will think about how i can improve the data structure, although it's quite simple so Im not sure how i would do that. thank you!
magic-amber•5mo ago
a
Record would be one way
with a keyof Record[] that dictates the orderflat-fuchsiaOP•5mo ago
i will test that