SolidJS•2w ago

How to improve list rendering performance?

Good evening, Just recently, i made a simple app with Solid. However, i'm a bit stuck at rendering list. Is there any best practice in Solid to render list? I suspect that I'm somehow doing something stupid since there is delay around 1~2s every time there is a mutation on the state and the list is getting rebuilt. The performance degradation is apparent when rendering a big list. the app: https://slainless.github.io/stringeraser/ the mentioned list, rendered with For https://github.com/slainless/stringeraser/blob/c836c8a830f9658976e6c738025e052bbe974436/src/components/match-pane.tsx#L104-L108

GitHub

stringeraser/src/components/match-pane.tsx at c836c8a830f9658976e6c...

Simple app for string removal across a document/text 😭 - slainless/stringeraser

4 Replies

bigmistqke•2w ago

<For/> works with referental equality, so if it's all going to be new elements in the array it is going to remount all the components which in solid means remaking all the html-elements, which can be slow the app is bit too complex for me to go through and too lazy to clone and play around with it, but you can check if it would be faster with <Index/> if that doesn't work, you could make a minimal reproduction in the playground and I could have a look at that

Erik Demaine•2w ago

Regarding referential equality, the issue seems to be that Matcher creates new objects for every match. I agree Index would probably work better, so you can re-use the DOM elements at least. You could also look at Keyed from solid-primitives but I'm not sure whether you expect to re-use existing items much. By the way, matches might be better written as a memo instead of an effect... though I see you're using it as a store so maybe not

slainlessOP•2w ago

Still the same condition when using Index. But this is without any code change, just simply swapping For with Index Yes it seems the rendering is indeed the bottleneck in this case. Ok, after some testing, looks like the list rendering itself is not the issue. Rather, it is caused by the store. Simply put, no matter how many matches are rendered, the app will still stutter when mutation occurs on the store with big input text Sorry for taking your time @Erik Demaine @bigmistqke and thanks for the input 👍

Alex Lohr•2w ago

Even if you used a memo, the object equality comparison would trigger on a new array. So the solution would be a pattern like

let unchanged = true, previouslyFiltered = [], previousMatched;
const matched = strings.filter((str, i) => {
  const filtered = exclude(str);
  unchanged = unchanged && previouslyFiltered[i] === filtered;
  previouslyFiltered[i] = filtered;
  return filtered;
});
const result = unchanged ? previousMatched : matched;
previousMatched = matched;
return result;

let unchanged = true, previouslyFiltered = [], previousMatched;
const matched = strings.filter((str, i) => {
  const filtered = exclude(str);
  unchanged = unchanged && previouslyFiltered[i] === filtered;
  previouslyFiltered[i] = filtered;
  return filtered;
});
const result = unchanged ? previousMatched : matched;
previousMatched = matched;
return result;

Gaming

Programming

How to improve list rendering performance?