To my knowledge and research... Would love correction if my logic is wrong here.

fetch() is used when you are trying to get data from a network or cloud service such as AmazonWS, and is "slower?" than importing. (fetch is for data that is constantly updating; weather, stock, etc)

import like importing a file import ProductInformation from './ProductInformation.json'; is used if you have a local file. In react this will load as soon as the component that is using the .json data is rendered.

If I store my .json file inside my components folder which is inside my src folder in create-react-app, I should use import.

In the future if my client wants to use my application and wants to change pricing in the .json file, I should use fetch().

To my knowledge and research... Would love correction if my logic is wrong here.

fetch() is used when you are trying to get data from a network or cloud service such as AmazonWS, and is "slower?" than importing. (fetch is for data that is constantly updating; weather, stock, etc)

import like importing a file import ProductInformation from './ProductInformation.json'; is used if you have a local file. In react this will load as soon as the component that is using the .json data is rendered.

If I store my .json file inside my components folder which is inside my src folder in create-react-app, I should use import.

In the future if my client wants to use my application and wants to change pricing in the .json file, I should use fetch().

• javascript
• json
• reactjs

7 Answers 7

Your assumption is almost correct. Just to clarify.

fetch or axios is for raising a http request which ever the server is, aws, azure or even your own static file server where you host your web app. So, if you keep a json file in your public folder, as you mentioned about clients' need to make changes, you can use fetch to raise a GET to your json file from server.

But if you put the json file in your src folder and use import, when you build it will be merged with your bundlejs there by the json object will be available inside your application memory but wont be available in the public folder.

Just think of import as reading from your filesystem. The fetch method should always theoretically be slower than reading from your filesystem, as there's network latency involved.

So yeah, the main difference is where the data is fetched from, as import reads from your files and fetch, well, fetches through an HTTP request.

To get to the more practical answer, just think of it like this :

• if this is a static file, that never changes, just import it, except if this is private information that you dont want to be included in your final bundle
• in all other scenarios, you usually want to fetch it

Those are two completely different things. import is a language construct introduced in the ES2015 version of the language, and as such is specified by the TC39 committee (spec here). On the other hand fetch is a web API and as such specified by the WHATWG (spec here)

They do not solve the same problem at all (nor try to aim to). import solves the "module problem" where you want to statically declare your dependencies and bind them to JS identifier : this is what import * as identifier from "module" is. Fetch however is an API which proposes an interface to access the network in an asynchronous fashion (XMLHTTPRequest used to support synchronous operations iirc). Fetch does it by introducting a new global function, fetch and new native classes : Request, Response, Headers and so on...

Where those two things might conceptually overlap is with the future import() function which will allow to dynamically load an ES2015 module but is is still in stage 3

simply import is used for import binding which exported by some other module. but for the fetch api used for manipulating http request and response.

As mdn states, import is used to import bindings which are exported by another module while the fetch API is providing an interface for fetching resources in general. Note that not all Javascript engines support ES6 modules.

The usage of those depends primarily on where the resource is located and what you want to do with it. As you state that you want to change it, my suggestion would be to keep it on the server side and do a require() or a fs.readFile/fs.writeFile on your json file to provide RESTful functionality.

In your client code you use the fetch API with different methods (GET|POST|PUT|...) to initiate changes or to get the information in your json-file.

import imports the requested file as a module, but fetch is similar to xhr calls or HTTP requests to fetch static files over the network.

if you use a bundling tool like webpack, imported modules will be merged into the final bundle (unless you externalized it)

Import will just simply import your file into the current file. While Fetch will return a promise and you can call that file whenever required asynchronously.

Import will get only the exported data from a file. while using fetch you can get full file.

Import get data at compile time while Fetch get data at runtime.