Using live query considerably slowing down React App

Technical Issue Reporting
#1

Hi,
First thanks for this wonderful set of tools!

I am building a web app with a custom dynamic NFT collection.

I am trying to use live queries so as to allow bidirectional update of the website from the smart contract when another user changes its NFT state.

I got everything to work quite well by pulling data from the caching database on Moralis but when I use live queries, my React App slow down to a halt. It seems like just creating the subscription object is enough to cause this using the exact same as on doc.
ie. I do not need to add a .on callback to cause the slow downs.

I also made sure to place the socket creation at the top of my React App component tree.

Do you have any experience with this? Should I follow some workflow to make Sockets efficient and fasts?

Thanks!

#2

Your front end becomes slow?

Or you are getting slow replies from the server.

My understanding is that your UI slows down - please confirm

#3

So Firefox gets very very busy, my fan starts to spin so it is fair to say it is happening on my local javascript?

#4

it sounds like it is something related to local javascript
if you try another browser it works better?

#5

no it doesn’t get better in chrome

#6

Could it be related to React trying to create a second socket for live queries?
Also I am using the React-App Moralis https://docs.moralis.io/moralis-server/tools/react-moralis system and I wonder if live queries sort of conflict with this.

#7

Generally, any time, a connection to Moralis break using the React App components, I find that my machine keeps going high on CPU as if some background loop is triggered within the NPM.

#8

Could it be some conflict between Moralis node.js package and web3.
Is the following a bad idea:

const Moralis = require(‘moralis’);
var Web3 = require(“web3”);
var web3 = new Web3(new Web3.providers.HttpProvider(‘https://speedy-nodes-nyc.moralis.io/…’));

Like using web3 directly at the same time as Moralis wrapper?

#9

it doesn’t look like a good idea to hardcode a speedy node url in your front end application

#10

Sure I have environment variables set up already. This is currently not deployed. I thought having the link would be helpful to you but in any case I edited my post.
This is a bit tangential to the issue, right?

#11

yes, it is tangential to the original issue

#12

So I completely re-organized my App and live queries are now working as expected.
Upon doing this, I seemed to confirm that importing web3 from a wallet provider or through web3.js seems to make my browser go crazy if at the same time I use Moralis packages. I have resorted to try to avoid doing this and when I need the traditional gateway, pass by .native

3 Likes
#13

Thanks for sharing the solution!