I see that react 18 has some cool hooks to help manually control the priority of state updates (useDeferredValue and useTransition) and using these methods fixes some performance issues that I have on a table. But React 18 isn't stable yet!
So I am wondering if there is a way to handle this is React 16 / 17? Is there a way to tell the reconciler to tag my row updates as low priority so that a user's typing updates will always interrupt and take precedence over the table rendering the rows?
For a tiny bit more context, my issue is that I have a search box and a table on a page. The initial data displayed in the table rows is unfiltered, but when the user types in the search box, I make a query to the backend and get a filtered list of data. When that data comes back, I render it into the table.
I can (and do) use a debounce on the query so that only if the user stops typing for 500ms do I fetch data. But this only helps when the user is typing faster than 500ms per letter AND it adds 500ms to the user experience of retrieving the data on every single call. I'd like something that feels more responsive.
The React 18 updates solve my problem perfectly. Looking for a way to do this in React 17.
Related
I am currently using queries to get the initial state of a user. They potentially could have thousands of individual documents that don't need to be set up via hooks.
My current approach is mostly working, however it does mean there is a double read on the documents that I create the hook on.
query(
collection(firestore, "userDocs"),
where("ownedBy", "==", userId),
orderBy(documentId()),
limit(6)
)
This is my initial query, I am using react infinite scrolling to then fetch more as they scroll down. Each of these documents is a rendered component in React.
Within that component I then setup a hook to pretty much go and get the same data that I just did.
setCol(doc(firestore, "userDocs", userDocId),{
snapshotListenOptions: { includeMetadataChanges: true },
})
They both set a document state on the component, once on load, and when ever the firebase hook goes off. I am using a react firebase package here for hook simplification.
My question is, how can I get this hook functionality which I really need, but stop this initial read from the firebase hook. If I don't do the initial query for the documents, I don't get the data I need to make the hooks. And also an approach I tried of just using hooks passed to the user doc component was much slower than my query based approach because firebase queries are really fast than singular document reads.
I am basically trying to prevent a second read when the hook on the document is created because its data will just be the data I got back from the query and isn't very efficient. I have seen some implementations that get around this using a timestamp updated at field, but does that require me to perform an extra write on the documents that I've just queried?
When I update the document that triggers the hook its possible I can pop a timestamp field in then but Im not sure how that solves my initial read problem.
Many thanks for any suggestions :)
Webpack has an option that is called aggregateTimeout, this is explained as:
aggregate any other changes made during this time period into one rebuild
So the idea is, how can I bundle multiple changes within time period e.g. 1 second; to a single state update?
For example I have an editor in my react app, it updates the state each time the user types text on the editor, but I found that it makes the app a little laggy. So I want a timeout that ignores text inputs within, let's say 500ms, and it only updates after 500ms passed since the last time the user did text input.
How can I implement something like the case? Thanks.
Please help me to make the decision, regarding which technique to use.
I have a big list (up to million rows) that is kept in redux state.
Once user types in filter criterion, I want to apply filter and show filtered data (actually piece of it with react virtualized).
I do understand that ideally this is a use case for simple selector (or memoized reselect).
The problem that I see: filtering itself may take 2-3 seconds, thus, I have to use debounce. For debounce i have to use middleware, because debouncing is asynchronous and impure.
Can effect (epic) take data from state and act as asynchronous selector? Or maybe there are some patterns for implementing debounce in selector?
Appreciate any advices.
I have a big list (up to million rows) that is kept in redux state.
Really? You're doing blunder mistake. This will consume huge memory. And some browser may not respond them correctly.
So, I would suggest you to apply filtering from database results. On each filter being applied, the application will need to get the results from the database say upto 10, 20, 50, or 100.
With this sense, you can keep using redux or use memoized effect depending on your application logic/complexity. Both will work fine without worrying about debounce method.
I have a requirement to consume huge volume of data ( like more than 100000 rows) by calling API end point and Data format is JSON and display them in react page. I am developing the logic using React-Table, but would like to hear experts opinion to know whether this is possible in reactjs? Is React-Table the right option in reactjs? Will there be performance issues?
Yes this is surely possible but involves the usage of virtual views like react-virtualized
The problem with 100k rows is that first render takes a lot of time, scroll could be tedious and every re-render takes a significant amount of time too.
With virtual views data is rendered only in active viewport and element are added/removed upon scroll reducing the rendering/reconciliation payload.
I am wondering what would be the best way to update a FlatList when actions are being conducted on its children.
Problem I am facing
What I am trying to do
I am trying to find the most efficient way to update the counts of the number of comments and the number of likes on each PostCard (displayed by the FlatList) in real-time. When a comment is added through the PostDetails page of any post, the higher FlatList should refresh the count.
My concerns/issues
I am aware of the extraData prop in FlatList for refreshing it, but I could not find a good way of using it, as my changes happen at a different/more granular level in the app.
I thought about attaching queries and subscriptions on my PostCard component itself, and solely for updating the number of comments and likes, but I am worried about the performance consequences of having 100 FlatList elements that each have subscriptions to self-update.
I am assuming that my problem is, in a way, similar to updating a higher-level list of group chats for each user of a chat app, when messages are posted in any of these chats.