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.
Related
I am trying to implement conditional rendering for our navbar's items depending on what page we're on (i.e. If we are on the chatrooms page, or "/rooms", then we don't want the "Chatrooms" nav item to render in the navbar). What I attempted to do was convert the Navbar into a class component, create a state for the currentPage and set it to window.location.pathname, and then created methods for setting the state and what nav items to render depending on the state, but it always requires me to reload the page when going from one page to another for the conditional logic to fully take effect. Is there a better way of achieving this functionality?
You could use react-router load content without refreshing the page. It's really simple to learn and use and you could probably get it up and running within an hour. You can Add Route components for the main content of the page.
When you route to a different page you could also call a setState function and change the currentPage, which in turn changes the navbar elements.
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
I have an inherited React app that i need to fix but after a few days, im stuck and need help.
I have a filtering panel on the left side which contains a 5 categories and items within their categories below it, each item has a checkbox next to it and when you click it, it updates the results on the right side, this works fine.
However i have a task to update the numbers next to the links in the filter panel, based on what was clicked and would like to know if there is a way to create the filters links first and then only update the number next to the link upon click.
All the code resides in the render method, any help would be great.
I have made a pagination for a list by Bootstrap and Backbone. The list contains links for different pages. What is the best way to to "save" the pagination "page" when user goes to different page and comes back to page where the pagination is the pagination gets resetted to page one. I can't use hash because there are many bugs with window.history.back(). Are there any decisions? Or how can I use cookies?
The standard way to do this is to use routing; When you press the back button from browser you will be redirected to the last route; If you have a custom back button on the page, add on your page model last_page property. When you render the page set the route as url address.
Maybe you have problem with your application structure. BackboneJS used to write single page. So that, when you choose different page index, your page should not reload, only new data is applied to your table. You should start with this book http://addyosmani.github.io/backbone-fundamentals/
Consider that there's a tabbed accordion, user can open one tab at a time, rendering each container take more than 100 milliseconds (sometimes like 1 second). How could I implement such a thing that user don't feel lag every time navigating between tabs and first time rendering won't be slow as well?
I'm thinking of these ways to do that:
Detaching element (or caching)
Implementing something like shouldComponentUpdate but for first time render
Some middle-way component that won't render if tab is hidden in first render and won't update if currently rendered tab is hidden.
Check if tab is rendered before and don't add it if it's not active and not rendered
Is there any library or Component that do such a thing? Or how can I implement one of these?
P.S: That's not only about performance, there's scroll position, user interactions that needs to be preserved when switching between tabs (like an input that is changed in one)