Why is browser taking so long to read blockchain data?

Question

I have a dAPP and I use reactjs for the frontend. The application returns data from a smart contract (the balance) on the homepage. The main problem that I notice is that everytime I or any other users access it, it takes like 2-3 seconds for data to be read from the blockchain. Until data is displayed, the balance is shown as '0' rather than the real value.

Furthermore, if a user with MetaMask changes their network (let's say from Eth MAINNET to Rinkeby), no data is displayed but 0.

Do you have this problem as well and if yes, how do you handle it? Is there a way to improve the time it takes to read data from Blockchain or is it a limitation of technology?

Some must know information about the general structure of the dAPP:

• I have the web3.js file which imports web3 and sets up provider either through MetaMask or through Infura.
• I have a deploy.js which enables me to deploy the smart contract. This file connects to rinkeby with menemonic and link provided by infura. In output I get the interface and bytecode
• I have another javascript file which is structured as following:

List item

import web3 from './web3'; 

const address = 'the address provided by the deploy file';

const abi = ['the abi provided by the deploy file'];

export default new web3.eth.Contract(abi,address)

EDIT: Found out that the more operations I have in ComponentDidMount (fetching balance, addresses, etc.), the more time it takes

Answer 1

It will always be slow if contacting a live node for data such as account balance.

My preferred way is to use Amberdata's API which is much faster. All you need is an api key then you can:

curl \
    -X GET \
    -H "accept: application/json" \
    -H "x-api-key: <your-api-key>" \
"https://web3api.io/api/v1/addresses/0xb7e3abd75119fe3cfc76015193226b21fc19230b/account-balances/latest"

Which will return the data like so:

{
  "status": 200,
  "title": "OK",
  "description": "Successful request",
  "payload": {
    "address": "0x06012c8cf97bead5deae237070f9587f8e7a266d",
    "blockNumber": "7446776",
    "timestamp": 1553638186000,
    "timestampNanoseconds": 0,
    "value": "65103167814228166337",
    "blockchainId": "1c9c969065fcd1cf"
  }
}

Let me know if that works for you! 😃

EDIT:

There is also a node wrapper package!

Answer 2

Have you considered caching the data or storing in somewhere like HTML5 session/localStorage. Then you can attempt to read from session/localStorage or whatever cache you consider first and then update to current balance when it is available.

Consider a microservice that constantly runs in the background querying the blockchain every minute or so for information like balance, keep an up to date value in an in-memory cache or dump it to a different database if your using one for quicker access.

Other approach would be to have the data before rendering the UI.