title: Relay Modern purpose of createFragmentContainer
body: <p>I've been trying relay-modern for some time, and I'm wondering what are the purposes of <code>createFragmentContainer</code> other than just for <em>describing</em> the fragment that <em>should</em> beloing to the <code>Component</code>.</p>
  
  <p>e.g. this is how documentation show how it is supposed to be</p>
  
  <p><strong>Parent.js</strong></p>
  
  <pre><code>&lt;QueryRenderer
    render={({error, props}) =&gt; {
      if (error || props) {
         return &lt;Child someData={someData}&gt;
      }
      return &lt;div&gt;Loading&lt;/div&gt;
    }}
  
    query={graphql`
      query SomeQuery($id: ID!) {
        endpoint(id: $id) {
          ...Child_someData
        }
      }
    `}
  /&gt;
  </code></pre>
  
  <p><strong>Child.js</strong></p>
  
  <pre><code>export default createFragmentContainer( 
    ({someData}) =&gt; &lt;header&gt;{someData.title} - {someData.name}&lt;/header&gt;,
    graphql`
      fragment Child_someData on EndPoint {
         title
         name
      }
    `
  )
  </code></pre>
  
  <hr>
  
  <p>But instead doing <code>Child.js</code> in that way, I can just rewrite or splitting the component with query to 2 different files like this:</p>
  
  <p><strong>ChildComponent.js</strong></p>
  
  <pre><code>export default ({someData}) =&gt; &lt;header&gt;{someData.title} - {someData.name}&lt;/header&gt;
  </code></pre>
  
  <p><strong>Child.js</strong></p>
  
  <pre><code>export default graphql`
    fragment Child_someData on EndPoint {
      title
      name
    }
  `
  </code></pre>
  
  <p>and it is still going to work (<strong>Parent.js</strong> will still recognize the fragment). So this makes me wondering if <code>createFragmentContainer</code> just for syntactic sugar to make things tidier.</p>
  
  <p>If anyone can shed a light with this one, that would be awesome! can't find so much in the <a href="https://facebook.github.io/relay/docs/fragment-container.html" rel="nofollow noreferrer">documentation</a> about this</p>