I am new to react and I am currently working on a material-ui dashboard where they had dummy data inside a json file which they used to populate a Table. I changed the dummy data and started calling the data from a mock api using axios. Everything works fine except the table takes about 5 seconds to load the data after each page load. Is there a way we can speed this up? I have experience working in php with bootstrap dashboards but I never encountered such an issue there. Any advice is appreciated. Thankyou.
The issue was that the key I gave was not a unique value. I changed the key value to index of the data and the time was improved significantly.
Related
Is there any way to get to see the data in the UI of strapi if the components made are nested till third level so that I can make changes there only and does not have to go to database all the time for data changes.The image shows a link components wihich has three three files inside it and the component itself is wrapped under a component which is again wrapped into another one and so on...it has the data in it but is not visible in the UI
I tried contacting the community but if someone figured out a solution by itslef do help as we are at production level now and this cms is to be used by non-technical people now who has no idea of what Database is...
If you are able to add data that is more than 2 levels deep and the only problem you are facing is that you can't see the nested JSON in the API response, I would suggest taking a look at
https://www.npmjs.com/package/strapi-plugin-populate-deep.
After installing it properly, you will just have to use you can use it as follows:
Populate a request with the default max depth.
/api/articles?populate=deep
Populate a request with the custom depth
/api/articles?populate=deep,10
Populate a request with the custom depth and filter
/api/articles/1?populate=deep,10
I am working on a project that shows live currency prices. I have to refresh the pricing data on the page dynamically. In this project I am using Django and SQL server. I could not figure out how to make it work using triggers and AJAX because AJAX needs an event to run like a user event or timer (that very bad for performance). Further, triggers can not be processed by Django. Is there a way to do it? Thank you for your help.
really finding this framework giving lots of features.My question is I am trying to request around 38916(>30000) amount of data in my React application and then showing them in a grid view in React.I am using Axios to load the large datasets coming through API.Could someone tell me how to load huge amount of records in less amount of time in React JS?Also I want to send the request for multiple api parallely.If anyone have any idea or better one Please post soon.
Your options:
Pagination/lazy load. If it includes images too then lazy load images too lazy load images with react
Use virtualised list to render all data at once
virtualised list
If you had to get all products in once , you should show to user with pagination or lazy load, for example 10 item every page and if user want's more data change pagination number..
I'm working on project with Vue and laravel. In each and ever components have more than one http requests when page is mounting, it's slowing things down and sometimes returns 500 error. So i thought if the data is loaded and store in Vuex store and return when page load it'll be effective, but if the data inside the database changing while navigate through pages, data will not change re actively in pages. So is there a way to detect that change using javascript listners. Any help ?
You should look into https://laravel.com/docs/5.6/broadcasting Basically once your backend code does the change to the DB you will need to broadcast that change to the front end.
I have a table having millions of records. I am using Sails js as my server side code , React js to render data in view and Mysql as my DBMS. So what is the best method to retrieve the data in faster manner.
Like the end user does not feel like getting a huge amount of data which affects UI as well.
Shall I bring only 50 records first and show the pagination in bottom using pagination logic and then using socket.io fetch the rest in background ?
Or any good way of handling it ?
This really depends on how you expect your user to go through the data.
You will probably want an API call for getting only the first page of data (likely in such a way that you can fetch any page: api/my-data/<pagesize>/<pagenumber>).
Then it depends on what you expect your user to do. Is he going to click through every page to see all the data? In that case, it seems ok to load all the others as well as you mentioned. This seems unlikely to me, however.
If you expect your user to only view a few pages, you could load the data for the next page in the background (api/my-data/<pagesize>/<currentpage+1>), and then load the next page every time the user navigates.
Then you probably still need to support jumping to a certain page number, where you will need to check if you have the data or not, and then show a loading state (or nothing) while the data is being fetched.
All this said I don't see why you would need socket.io instead of normal requests (you really only need socket.io if the server needs to be abled to make 'requests' to the client so to speak)