title: Components in Delegates in QML
body: <p>I wonder about the impact of having a component in a delegate of a <code>ListView</code></p>
  
  <p>Consider this: </p>
  
  <p><em>DelegatePrototype.qml</em></p>
  
  <pre><code>MouseArea {
      property Component myPage
      onClicked: { 
          myPageLoader.sourceComponent = myPage
          myPageLoader.pageData = model
      }
  }
  </code></pre>
  
  <p>and <em>main.qml</em></p>
  
  <pre><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  
  ApplicationWindow {
      id: appWindow
      width: 1024
      height: 800
      visible: true
  
      Loader {
          id: myPageLoader
          x: 100
          active: true
          property var pageData
      }
  
      Component {
          id: myDelegate
          DelegatePrototype {
              width: 100
              height: 50
              myPage: Rectangle {
                  width: 400
                  height: 800
                  color: 'steelblue'
                  Column {
                      Text {
                          text: pageData.name
                      }
                      Row {
                          spacing: 4
                          Repeater {
                              model: pageData.age
                              delegate: Rectangle {
                                  color: 'red'
                                  width: 7
                                  height: 30
                              }
                          }
                      }
                  }
              }
  
              Text {
                  anchors.centerIn: parent
                  text: model.name
              }
          }
      }
  
  
      ListView {
          width: 100
          height: 800
          model: ListModel {
              ListElement { name: 'Herbert'; age: 5 }
              ListElement { name: 'Hans'; age: 3 }
              ListElement { name: 'Ludwig'; age: 12 }
              ListElement { name: 'Franz'; age: 9 }
              ListElement { name: 'Peter'; age: 2 }
              ListElement { name: 'Karl'; age: 15 }
          }
  
          delegate: myDelegate
      }
  }
  </code></pre>
  
  <p>So for the question: I have the <code>property Component myPage</code> in the <code>DelegatePrototype</code> and in <code>main.qml</code> I assign a component to it, that I declare <em>on-the-fly</em>.<br>
  I might have instead explicitly declared a component beforehand, and assigned it then like this:</p>
  
  <pre><code>Component {
      id: myPageDelegate
      Rectangle {
          width: 400
          height: 800
          color: 'steelblue'
          Column {
              Text {
                  text: pageData.name
              }
              Row {
                  spacing: 4
                  Repeater {
                      model: pageData.age
                      delegate: Rectangle {
                          color: 'red'
                          width: 7
                          height: 30
                      }
                  }
              }
          }
      }
  }
  
  Component {
      id: myDelegate
      DelegatePrototype {
          width: 100
          height: 50
          myPage: myPageDelegate
          Text {
              anchors.centerIn: parent
              text: model.name
          }
      }
  }
  </code></pre>
  
  <p>While I belive in the latter case, I have only one <code>Component</code>-object for <code>myPage</code> in my memory, and for each of the instantiated <code>DelegatePrototype</code>s only a reference to this, I might imagine that in the former case it might happen that I create a <code>Component</code>-Object for <code>myPage</code> for each instance of <code>DelegatePrototype</code>, which might clutter the memory with identical <code>Component</code>-objects pretty fast.</p>
  
  <p>Is my assumption right here and I should avoid assigning those <em>on-the-fly</em>-declarations of <code>Components</code> or will QML optimize this for me?</p>
  
  <hr>
  
  <p>I know, there are crossfile-references (myPageLoader is referenced from the DelegatePrototype) but for the question I don't think it is necessary to explain why I chose to use this crossfile-reference.</p>