Stack overflow when the model includes large lists (1k-2k elements)

[lilnasy]

I am writing an entry for Fable.Solid Elmish in krausest/js-framework-benchmark. The benchmark involves creating, rendering, appending, updating, and deleting rows.

The implementation fails with the error below when the number of rows goes beyond 1k.

I'm pretty sure application code is not at fault here; the update function returns control without any errors after adding over 1k elements to the model. You can see the full code here: App.fs

[AlexErrant]

Unrelated, but Ryan ran into your PR on stream and was amused.

[joprice]

I was able to get this working with a few changes: https://github.com/krausest/js-framework-benchmark/compare/master...joprice:js-framework-benchmark:solidjs-elmish

• switch from lists to arrays, which is hinted at in the Elmish.Solid file Attention: use arrays instead of lists for better performance
• use anonymous records, which compile to plain js objects https://fable.io/docs/javascript/features.html#anonymous-records
• avoid tuples - not sure about the runtime representation of tuples, but they were breaking reactivity until i switched to an anonymous records there as well

[MangelMaxime]

Tuples are represented using arrays.

let a = "maxime", 32

export const a = ["maxime", 32];

[goswinr]

To track changes in an array, you would have to use a Foror Index component. Only functions and member expressions (=property access) are tracked when used in a reactive scope ( e.g. an effect or in JSX). That is why anonymous records work and tuples not.

(BTW I just updated the samples in this repo to use the latest version of solid-js)