ReactJS Handle local JSON data Asynchronously

Question

I have a data.json file in my local workspace environment. The app is client side only.

I'm uncertain if the best (advised) way to consume such data is either via:

import data from './data.json'
// and got to town on it...

Or if I should bring that data into my React Component via a GET request (fetch, axios, etc) where I'd place it inside of a componentDidMount


async componentDidMount() {
    const data = 'http://localhost:3000/data.json'
    try {
      const res = await fetch(data)
      this.setState({res})

    }
    catch (error) {
      console.error(error)
    }
  }

What's the correct approach and best practice to go about this?
Should CRUD requests only be used for external https end-points and not for local data like my example?
Feel free to suggest a third approach if I missing anything here.

The third option is declaring your object inline, I think `import` and `inline` are the same, but for readability, I'll choose `import`. — Dennis Vash, Apr 13 '19 at 19:39
https://stackoverflow.com/questions/31758081/loading-json-data-from-local-file-into-react-js — Dilshan, Apr 13 '19 at 19:52
You can't use an http request... There's no server to respond to that request... Just import... — SakoBu, Apr 13 '19 at 19:55
The answer depends on the use case. Maybe it is dynamic configuration or something. More exposition required — Aluan Haddad, Apr 13 '19 at 19:58

score 2 · Accepted Answer · answered Apr 13 '19 at 19:44

I would suggest using the first method (import data from...) for the following reasons:

Less to go wrong. Less code, fewer bugs.
Eliminates CORS and other network issues.
No hardcoded urls. These will break as soon as you're not using localhost anymore ie a deployed environment.

Dennis Vash · Answer 2 · 2019-04-13T19:51:46.973

The third option is to declare your object inline:

import React, { useState } from 'react';

const algorithmTemplate = {
  "name": "",
  "description": "",
  "nodes": [
    {
      "nodeName": "",
      "algorithmName": "",
      "input": []
    }
  ]
}

export default function AddAlgorithm() {
  const [formData, setFormData] = useState(algorithmTemplate);

  return (...)
}

Vs. using `import`

import React, { useState } from 'react';
import algorithmTemplate from 'config/algorithm.template.json';

export default function AddAlgorithm() {
  const [formData, setFormData] = useState(algorithmTemplate);

  return (...)
}

I would choose readability, it depends on your JSON size, etc.

score 1 · Answer 3 · answered Apr 13 '19 at 20:08

I think the first way is better.

The second one is an asynchronous process. Here you only see the word 'async' but if you convert that 'async' thing into es5 javaScript, you will see how much-hidden code is there. More code, More process, More memory usage, less speed. So the first way is better.
What you gonna do after deploying your application to the real world? Are you gonna change all the places where you wrote localhost:3000?
The meaning of the word 'fetch' is 'go for and then bring back'. Your application doesn't even have server-side logic. So where you go from your front end? just from one directory to another?
If your JSON file is too large, then you have to use server-side logic to handle your database. At this point, you have to use a fetching thing.

ReactJS Handle local JSON data Asynchronously

3 Answers3

Vs. using import

Vs. using `import`