title: ReactJS Handle local JSON data Asynchronously
body: <p>I have a <code>data.json</code> file in my local workspace environment.
  The app is <strong>client side only</strong>.</p>
  
  <p>I'm uncertain if the best (advised) way to consume such data is either via:</p>
  
  <pre><code>import data from './data.json'
  // and got to town on it...
  
  </code></pre>
  
  <p>Or if I should bring that data into my React Component via a <strong>GET request</strong> (fetch, axios, etc) where I'd place it inside of a componentDidMount</p>
  
  <pre><code>
  async componentDidMount() {
      const data = 'http://localhost:3000/data.json'
      try {
        const res = await fetch(data)
        this.setState({res})
  
      }
      catch (error) {
        console.error(error)
      }
    }
  
  </code></pre>
  
  <ul>
  <li>What's the correct approach and best practice to go about this?</li>
  <li>Should CRUD requests only be used for external https end-points and not for local data like my example?</li>
  <li>Feel free to suggest a third approach if I missing anything here.</li>
  </ul>