Does passing an object via props to child react component, clone the original object or pass by reference? : <p>If am to pass an object to a child component via the components props, does this object get cloned or does it simply pass a reference to the original object?</p>

<p>For example in my <code>App.js</code> I am importing a JSON object <code>ENTRY_DATA</code>. I am then passing that object via props to my child components (or in this case, routes). Am I saving on memory by doing this or would it be the same as if I was to import <code>ENTRY_DATA</code> on each component?</p>

<pre><code>import React, { Component } from 'react';
import { withRouter, Route } from 'react-router-dom'
import ENTRY_DATA from './../../entry_data.json';


import Register from '../Register/Register';
import Categories from '../Categories/Categories';
import Category from '../Category/Category';
import Entry from '../Entry/Entry';

class App extends Component {

  render() {

    return (
      &lt;div className="app" &gt;

        &lt;main&gt;
          &lt;Route exact path="/" component={Register} /&gt;
          &lt;Route exact path='/categories' render={(props) =&gt; (
            &lt;Categories {...props} categories={ENTRY_DATA} /&gt;
          )}/&gt;
          &lt;Route exact path='/categories/:category' render={(props) =&gt; (
            &lt;Category {...props} categories={ENTRY_DATA} /&gt;
          )}/&gt;
          &lt;Route exact path='/categories/:category/:entry' render={(props) =&gt; (
            &lt;Entry {...props} categories={ENTRY_DATA} /&gt;
          )}/&gt;
        &lt;/main&gt;

      &lt;/div&gt;
    );
  }
}

export default withRouter(App);
</code></pre>

<p>If <code>ENTRY_DATA</code> is 5kb's, And I am passing it to 3 different components, does that mean I end up with 20kb's worth of <code>ENTRY_DATA</code> or do they all reference the one 5kb <code>ENTRY_DATA</code>?</p>
