Many Stimulus controller instances

1

Hi all,

I have a question about Stimulus controllers.
At the moment I am building a simple productivity tool with a Task List feature.
The tasks within these task lists have specific logic to which I have attached Stimulus controllers.

Though I realize if my task list has like 200 items and I attach 6 Stimulus controllers to hide/show modify task name, modify note etc … I end up with 1200 instances of Stimulus controllers…

The heap size is dramatically increasing on large task lists (spikes at 140 MB to stabilize a few seconds later around 69MB). While is really in check on small tasks lists (less than 20 tasks).

I have checked on Basecamp and they don’t seem to have as many controllers on their tasks.

So my question: is it ok to have controllers attached to DOM nodes that are repeated multiple times or should I find a way to delegate to a higher level Stimulus controller ?
And from what number of instances of a specific controller is it worth having the logic reworked into delegated logic ?
I probably will discover it while I implement it but if anyone has had the issue before …

Note: my task lists is a pure frontended feature. So basically the user can edit in place any tasks. I guess switching to a more separated flow where the task edition happens in a specific view would solve the problem… Still interested to have your input on the above issue.. Especially if I am correct inferring attaching a Stimulus controller generates an instance of the controller or if I am mistaken..

Note2: Actually this is probably what Basecamp is doing. they have clickable elements with no controller neither data-action on their elements. They basically only have a data-behavior attribute. So I guess they have a higher controller that registers every click and they resolve the click much higher in the DOM, and associates the behavior to the function to trigger. I guess Stimulus controllers cannot efficiently be attached to as many elements as desired without a cost in performance. Think I will create such a delegator controller and resolve higher…

1 Like
2

You might want to look into targets and actions before writing off stimulus for not being able to handle many dom elements.

3

Since you’re wanting to edit tasks in place, you likely don’t need Stimulus at all. That use case is tailor made for Turbo Frames.

4

Thanks Jeff. It’s all frontended, I persist Data in IndexedDB. Nothing come from the backend.
But I am pretty sure the Basecamp approach to catch every click and resolve the behavior through the event.target is the best option.
Will see how it goes as I implement.