title: React - is it ok to store state in a separate file?
body: <p>I'm new to React so apologies for reaching out with what may be a silly or basic question.</p>
  <p>Is it a sensible and workable solution to store default state in an external file?</p>
  <p>So if I have an app container like this:-</p>
  <pre><code>import React, { Component } from 'react';
  import Spy from '../spies/weather/Spy';
  import Local from '../local/Local';
  import './app.css';
  import { state } from './state'
  
  class App extends Component {
  
    constructor() {
          super()
          this.state = state
    }
  
    onLocationChange = event =&gt; {
      this.setState({ location: event.target.value })
      }       
    setWeather() {
      //this.setState( { weather: { weather }});
      console.log(`this is ${this}`);
    }
  
  
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;Local locationChange={this.onLocationChange}/&gt;
          &lt;Spy location={this.state.location} setWeather={this.setWeather}/&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>and a state.js file like this:-</p>
  <pre><code>export const state = {
      location: '',
      weather: {}
  };
  </code></pre>
  <p>It apparently works fine, my child component 'Local' has an OnChange event that updates the location property of state clearly visible in the React Dev tools.
  Everything I've seen so far has state in the parent container or has used Redux which I might do if I can get my head around React.</p>
  <p>I was just after some advice about how to manage scalability in what could become a monster App container with loads of functions but especially a massive state object with some quite obscure defaults.</p>
  <p>What would you advise to allow App to grow sensibly - would you partition state in such a way perhaps breaking it down even further? Does it slow things down or create issues?</p>
  <p>Thank you!</p>
  <p>Phil</p>