Using live query considerably slowing down React App

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?


Your front end becomes slow?

Or you are getting slow replies from the server.

My understanding is that your UI slows down - please confirm

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

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

no it doesn’t get better in chrome

Could it be related to React trying to create a second socket for live queries?
Also I am using the React-App Moralis system and I wonder if live queries sort of conflict with this.

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.

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(‘…’));

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

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

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?

yes, it is tangential to the original issue

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


Thanks for sharing the solution!