Stimulus: initialize vs connect

[saneef]

How do the initialize() and connect() differs in use?

[sstephenson]

Stimulus calls initialize() once per controller, and connect() every time the controller is connected to the DOM.

For example, say you have:

<div id="hello" data-controller="hello"></div>

Stimulus calls the corresponding controller’s initialize() method first, followed by connect().

If you then remove the element from the document:

const element = document.getElementById("hello")
element.remove()

Stimulus calls the controller’s disconnect() method.

Now, if you add the element back to the document:

document.body.appendChild(element)

Stimulus calls the controller’s connect() method again, but does not call initialize().

[saneef]

Thanks @sstephenson for the clarification. It would be great this info see in Handbook. Pardon me if I overlooked.

[sstephenson]

Yes, I agree! I’m working on getting it into the handbook right now :)

[aaronkelton]

Here's the link to the section in the handbook: Lifecycle Callbacks Explained.