I am using react with redux for development.
I have around 20000 rows in database. I need to display list to users on screen, 10 rows at a time. I also have sorting and filters applied to the list.
I can think of 2 options
Store only UI state of component in the redux state and bring data for each page using ajax/fetch. This way all sorting and filters are applied on server end and i get only 10 rows to display at a time.
Bring all data once to redux state and display 10 records. This way we do not request server for data again, as all sorting and filters are applied within data stored in state
What is better option/practice?
Related
I am currently building a calendar schedule view feature, where I have Month title as Header and the days as the items. I am currently fetching calendar event of about 6 weeks. which if the data is not present or so, it would still cover up the page and I can use onScrollEnd to query more data via useQuery.
But, I am trying to optimize my calendar feature and querying 6 weeks worth of events would not be ideal and would take time to load. thus, I was trying to find a way, where, if I can query let's say 1 week worth of data, if that does not have enough data (like 1-2 events) to cover the screen (for user to invoke onScrollEnd), then query next batch and so on and at the end wrapping the container with memo in order to help boost the load speed and lazy load data as required. Any idea how would this be possible?
I have looked at various examples of lazy loading such as:
https://snack.expo.dev/#johnborges/044274
etc, but my problem is that in these code examples, they do not cover the possibility of first or second batch/ page to have less data and querying for next page automatically.
I also thought of using FlatList nested with SectionList, but ended with conclusion that it would not be possible and data would be rendered twice.
What I want to happen:
<Schedule> --> component
render → Coordinate which Month in the SectionList should paginate through the events
<SectionList>
onEndReached → create more months
<Month>
<FlatList>
render → <Event />
onEndReached → fetch more events
<FlatList>
</Month>
</SectionList>
<Schedule>
So there are two "onEndReached" triggers, one to create more months when the user scrolls down the entire page and a second to get more events, when the user scrolls down the current month.
The Month component should just load 1 weeks worth of events at a time and paginate as the user is scrolling.. I somehow need some way to figure out that if the current week does not have enough data to cover the screen then query more data, and so one as always show the full page... Any help/ ideas would be appreciated. Thanks :).
I would try to measure the y position of the last element. If the y position is not close enough to the bottom, fetch more items. Store the previous fetch in the state. Add to that state the new fetch.
I have a data table which supports server side pagination and sorting.
I am using Redux as my store and React for display. The scenario is :
I have 5000 rows and hence server side pagination. Now the real challange is :
How do I use redux optimally to fetch data remotely in combination with Pagination and Sorting ?.
This link explains how I can handle server pagination by not hitting the server API for repeated data. But how can I handle pagination and sorting (together) in terms of saving data in REDUX and not making unnecessary calls to API for repeated data.
Example :
Pagination - Page Size = 10 =>
I am on Page1 -> I get first 10 records and display / save them with a FLAG that Page 1 data fetched true (as mentioned in the above article). Same for other pages. Now when I go to ANY page number; I check the flag, based on which I fetch data from REDUX or API.
If sorting is introduced in this solution; what can be done ? Need optimal solutions performance wise. Thanks !
I already have a table that renders my data. But there can be as many as 1000 rows in the table.
Right now, the dataprovider component sends date to the table component via props. What's the best way to start pagination? Should I still fetch all the data at once, as is currently the case? If so, where do I store it? Keep it in memory and take slices as needed? Or somehow use query params for the the number of records to fetch (0 - 24, 25 - 49, etc)?
Returning all the data in one response could be too large, this depends on the size of each item. If the size of the response is small, you can simply request all the data and do the pagination on the UI. You can use react-table to do this.
If the response is too heavy (time-consuming), you have to implement pagination on your server. Then you can use react-table to seamlessly integrate the pagination to the UI.
The approach you use to paginate it is up to you, here are a few ways you can do it in: API pagination guide
I am wondering if anyone has implemented a virtual scrolling FlatList with data provided from firestore? I am currently using onEndReached with a handler that re-fires a firestore query where the 'limit' option is incremented by 10 every time. Works Ok but there is the problem where if I keep scrolling even at the end, the 'limit' value just keeps increasing. What is the best way to achieve what I am after? ( I am not looking for a 'Load more' button. Rather load more data when nearing the end of the list. I am using react-redux-firebase and redux-firestore packages for data retrieval)
On onEndReached handler, just check if the length of record in firestore becomes equal or lesser than the total incremented.
Let's say firestore had 103 records and you incremented 10 times now and your list has 100 items on 11th(increment) your list will increment to 110 but there is not that much record in firestore as 103<110 so it shouldn't update the list any.more
I was asked to develop a multi-step form in React. The form contains 30 fields to be filled and it should be displayed in 3 steps of 10 fields each.
The first 2 steps have "Save" and "Next step" options to save the current work or continue with the next step.
The final step has "Save" and "Finish form" options, both of them will save the form in the database (through a web service).
Something like this:
The project is made on React, using Mobx for the state management, and I'm new to react. My question here is... how should i manage the states and the stores?
Should i have a single Store (FormStore) with the 30 fields and pass it to each component through the props and they will fill each field?
Is there any way i can have a single store (like a singleton) and each component fills its fields there?
I have to manage the fields information in memory untill the Save button is hit. And if when the Save button is hit, i need to save just the filled fields.
Any kind of guide will be appreciated.
If this form data is not changed anywhere else in your application, you can use a single store for all. I cannot think of any disadvantage given that it is relatively small.
You would want to split it if the answers could be put in different categories and different categories would be mutated by different functionalities of your app.