When we render all the list at a time the browser is getting lagged
We are trying to render a chart with 100k+ item in an array, where all the items in the array should display in the chart.
Is there is any best way to do it in React
Consider using Lazy loading like https://github.com/bvaughn/react-virtualized
but don't recommend showing such a huge set of data at once, what you can do is to have pagination, both client-side and server-side pagination.
for a line chart with huge data set, please consider using canvasjs https://canvasjs.com/react-charts/performance-demo-chart/
Use react virtual list, it will render only visible items.
https://github.com/bvaughn/react-virtualized
Related
I'm attempting to use react-window-infinite-loader with a FixedSizeGrid from react-window.
Before I start, I created a codesandbox with a minimal example which I'll reference in the question.
The issues I'm having are:
The grid doesn't seem to load all of the items in view. This is seen on initial load where the bottom two items on the first page are still in the loading state. This is strange because according to the docs, the infinite loader will load rows up until the threshold, which is 15 by default.
When scrolling, items near the end of the grid are not loaded in. In the example this can be seen by scrolling to the bottom and the seeing a batch of items in the loading state.
I think that my issues are due to using the infinite loader with a grid but following the example of the list. I think that part of the issue is the isItemLoaded function because the index I get from that doesn't seem to correspond with the index of the item, but I think it's the row?
In the end I'm not sure how to resolve these as the documentation I've seen has the infinite loader being used with a list component instead of a grid component.
In my React app, I have a page that when renders, it makes a fetch request using React Query useInfiniteQuery to get two items from the server and populate a list.
I implemented a "View more" button that when you click on it, it will call React Query useInfiniteQuery, fetch more data and add it to the list. I can do this X times and potentially get hundreds of items in the list.
When there is no more data to fetch I change that button to a "View less" button and when I click on it I want to do some kind of "collapse" and show the fist two items on the list.
How can I achieve this? Is there something that comes with React Query that let's me do this?
Should I just remove the items from the DOM manually?
react-query doesn't do anything dom related, it's up to you how many pages you want to render. if you have 10 pages in the cache and only want to render 2 of them - then only render 2 of them. you can also remove the other pages from the cache with queryClient.setQueryData, but I wouldn't do that.
I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
I am learning to react native and I found the following term on this documentation.
If you have a long list of more items that can fit on the screen, you should use a FlatList instead.
Which means that the FlatList component is used for a flat list that is fit on the screen and not scrollable. But on the FlatList documentation it says:
The FlatList component displays a scrolling list of changing, but similarly structured, data.
Please, can anyone tell what does it mean? Because both documentations are going opposite.
There is a lapse in your understanding of the sentence from the first documentation link. It actually says:
If you have a long list of more items than can fit on the screen, you should use a FlatList instead.
Notice that it says than instead of that which are totally opposite of each other. The phrase than can fit on the screen means that you have items that cannot fit within the current display size, so using FlatList is recommended.
Both ScrollView and FlatList are scrollable components. Some differences are:
ScrollView is a lot more generic. You can nest any sort of component within a ScrollView and they won't complain. FlatList on the other hand accepts similarly-structured data.
Components contained within a ScrollView will render together when it loads. FlatList will only render its children which are within the scope of the screen, and render the remaining ones when user scrolls to them.
UPDATE:
When I say 'display', I mean the phone's actual, physical display, and by 'container' I mean the set of components/items which make up your app's current page, like a combination of text inputs, buttons, views, etc.
Consider the following Log In form (source):
Every item (component) in this container screen is visible on the phone's display since there aren't a lot of components to begin with. You can get away without using the support for scroll here.
However there a lot of times when you have a lot of components in your container but the display can only fit a limited number of them at a time. Rest of the components would, sort of, spill out of the phone's display. In those cases, you must use a scrollable component to properly display all of them, and so that your app's user can actually reach the components which are out of display's current range. For example an inbox with many messages, or a to-do list with many items:
In the image above, phone's display can only show first 6 items in the inbox. What about the rest of them? Of course you have to scroll to see them! You may use ScrollView or a FlatList to enable the support for scrolling here.
Now, if you use ScrollView in these cases, all children (inbox items) within the container will load when this particular app page loads, i.e. at the same time. Consider an inbox with 3000 items. It would take forever to load all of them at the same time! The user would be waiting for a long time for them to load. Therefore, a simple ScrollView won't work here.
Fortunately, we have FlatList for that.
When you use FlatList to display scrollable components, only a limited number of items will render at a time which can fit the current display (say, 6 items in the example above). What about the remaining 2994 items? FlatList will render them dynamically as the user keeps scrolling down.
I use ant design table and I want to fix the height of table and add scroll when data is large
antd table demo
And I want when user scrolls to the bottom of the table, then more data is fetched from the server. But ant design table does not have the onScroll event, I cannot know when and where user scrolls to
I find these people having the same issue as me
antd gihub
and they suggest to use refs and I use this ref solution but it does not work
gist solution
Could you show me how to do it?
This issue should be resolved by two things:
Use scrollToFirstRowOnChange , it keeps position consistent after every re-render.
Add scroll event on the .ant-table-body.
You can use React Lazyload and wrap your components on frontend side. If you need backend lazy loading you can check this example: Node.js + MongoDB example and set the amount of data you need to distribute per page