Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am trying to achieve something like this:
The data is something like: Root Category -> Sub Category -> Products.
We have something like 3000+ products. Showing all products slows down the device (if there is something I can do to render faster, please let me know), so I've cut them down to sub-categories instead, where there are about 5-12 sub-categories within each category, and about 200 products within each sub-category.
The Code
List Component:
https://gist.github.com/Fl4zher/5e6f90d3d10e494d0f19395231f25946
TabBar:
https://gist.github.com/Fl4zher/f42afbbc6a57602d0ed4c682d5ac0a20
What I've experienced
The list will be a bit laggy even with 200 products.
When I press on sub-category at tab menu, it takes a bit while to take action (about 1-2 sec).
When I scroll, the tab menu doesn't follow up quite well.
After using the tab menu few times, it goes slower than before.
What I want
When I press on a category from tab menu, I want it to scroll to the chosen sub-category list.
When I scroll, I want the tab menu to follow along with the current shown sub-category list.
First of all, keep away from ScrollView for this type of use case where you have to render lots of data dynamically, Scrollview is a scroll container that renders all the data once if you have lots of data which will cause performance issue and will make JS thread busy.
Now you have options to use
RecyclerView
FlatList
SectionList
Now all the above three list view provide onEndReached method and onEndReachedThreshold (Threshold to trigger the onEndReached or distance from bottom)
Before reaching to end of the list make a network call to your server and fetch newer data and add it to the list like this [...oldData, ...NewData]
Set your initialNumToRender to 10 or 20 (Which covers the view and have some scrollable distance to the bottom)
Set maxToRenderPerBatch so all of the renders will not be rendered even if it's loaded into the list.
Set windowSize so List will maintain it's a view for a scrollable view and will not unmount the view when it goes out of the view.
Use Section List and react-native-fast-image
Old Answer:
I would suggest you use Flatlist with lazy loading
Please add pagination, load 50 items, when scroll ends load next 50. Even if you fetch all 3000 items at once, do render 50-100 at a time.
For images use react-native-fast-image
Do not render all 3000 items at once, it is unnecessary as the user may not scroll the whole list.
Related
My customer give me a table with 12k records (about 20->30MB) and then they want to show all in screen, at this time they dont want to pagination.
When the page is loaded, I call api and update new state for component but I take about 10s to finish render and when I scroll this list, it's slow too.
My question is How do I make it faster?
This is second case, when I try with 33k records (about 51MB), memory leak occur and white screen appear.
My question is What is the limitation of state? Do I update state with bigger data?
First of all, what you need is Infinity Scroll.
It's like what Netflix or Prime Videos Does.
First You call 20 Records and when you scroll to the bottom it will call 20 more records and then so on.
So It will start with 20 and as soon as you are about to hit the bottom of the scrollbar you will call the API to fetch 20 more and add it to the old List.
Now If you have scrolled a lot and you have like 2000+ Records and It slows down, then use react-window or react-virtualized package, what this does is only render the content which you are viewing in the dom.
Check this video for reference https://www.youtube.com/watch?v=QhPn6hLGljU.
For the first question, the reason why it becomes slow is because the DOM you are rendering is giant, so it consumes way too much memory, hence your browser starts to hog your RAM, you should implement virtual scroll so that only visible elements are loaded in the DOM.
In ReactJs, what would be the best way to breakdown the component hierarchy in a multi-page application ? For an example take an application with two columns. Left most column is the side bar and the right most column is for loading different views.
One view flow would be as follows. Side bar contains a link to view a list of products. Once the link is clicked a set of product with brief descriptions would be loaded into the right hand column.
If the user selects a specific product, the a full detailed view of that product would be loaded in the same panel replacing the original list view.
Now does that full detailed view component comes under the product list component as it's loaded by clicking on a product or is it better to keep it as a child component of the main application ?
You can take a look at 'Thinking in React' link which kind of goes over the same theory on what you are asking which is how do i breakdown my components.
https://reactjs.org/docs/thinking-in-react.html
You should put your data where you have to click/or triggering an event that will make your data change. In this case you would have to click on a link to trigger a product list, then click on the product to trigger product description.
You should not go more than 1 layer deep if you are passing state so don't pass it from parent to child to child. If this is the scenario you should move your state lower.
I hope this gets you going and thinking towards the right path.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
TL;DR: How can you add HTML content before the currently viewed content so that the page does not jump?
Longer explanation:
We have to render large manuals with sometimes hundreds of chapters in HTML. The manuals can be several MBs so loading it all at once would take to long. We can load chapters on demand.
The problem is that the HTML is responsive and the chapters have different lengths. Some have just a few sentences, some are several pages long. This means that we don't know the height of the content. The height does actually change whenever the user resizes the browser, changes the orientation or simply the font size.
The typical lazy list libraries cannot be used since they require a fixed height for each cell which is not the case here.
We would have to render a chapter outside the DOM, calculate its height and add it to the container diff.
Whenever the window size changes, all sizes would have to be recalculated.
The naive approach would be to just load a few chapters before and after the current chapter. Then poll the scroll position every second or so and check if we have to load more chapters.
The problem is that when the user scrolls up and content is added above the current position, the page jumps and the viewer gets lost.
Is there a way to deal with this problem without having to create custom scroll handlers?
Is this even a thing? Or can modern browsers easily handle 5000 page HTML documents?
What you want is an infinitely scrolling table, where table cells that scroll off the page are recycled and reused with different content.
Using a model-view approach (or a similar model), you can queue and dequeue reusable cells that lazy load data from your data source (e.g. in this case chapters).
The inherent benefit to doing this, is you no longer need to concern yourself with the visual adding, removing, and positioning of each chapter on the screen (and, worse, rendering them—400 chapters’ worth of text would be really choppy). Instead, you manage your data one one place, and present it inside the same, reused visual elements.
The tricky part is getting the table cells to work with variable heights.
Image source and some more reading: http://hrily.co/blog/2017/05/20/rendering-large-html-tables.html
Also Google around for more infinite scrolling tutorials.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
Is there any jquery library using which it is possible to move menu bar horizontally? What I want to do is I have a menu bar which contains five items (Home, About Us, What We Do, Technologies, Contact Us). It is a dynamic menu bar and if the admin wants he can add more items to this menu bar. So suppose he adds three more items to the menu bar like (Item1, Item2, Item3) then new menu bar will look like (Home, About Us, What We Do, Technologies, Contact Us, Item1, Item2, Item3). And also he can add even more in future. Now what happens is on adding more items to the menu the newly added items are not displayed properly because page width is defined at 80% and it cannot be increased. So what I was trying to do is to provide a horizontally sliding menu. Means two arrows will be available at both the ends of the menu bar and visitor can press left pointing or right pointing arrow to access the menu items.
Well so far I have not come across any jquery/javascript for this so I tried some other jqueries but they are for images and what happens is on pressing left or right arrow the whole menu slides but I want only one item to slide like on page load if user presses right arrow then home will be hidden and the menu bar will display like this (About Us, What We Do, Technologies, Contact Us, Item1). Mean on each right arrow press each leftmost item will hide and right most items will start showing up one by one.
If you guys need more clarification I want Firefox like horizontally sliding functionality for my menu bar. In Firefox when more and more tabs are opened then after certain number of tabs two arrows appear at both ends and user can press arrows to slide and access the tabs.
Thanks for your help in advance.
A sliding menubar does not look good. I may suggest some plugin that you can find here
but, i suggest to change your mind about the design, and have something like this:
When the user clicks on the Plus button, you can take him to a page where he can see as many options as he wants.
Or, add a drop down next to the menu bar where user can see all the options.
Even if there are many such libraries present. You will yourself have to code them and use in your page.
Or simply you can download a free template which makes use of it and edit it as per your requirement.
Though using such free templates without proper license is not professional.
You can try this though at the primary stages.
Do R & D on them.. edit and see the effects..
More you will spend time on understanding it more you will learn..
Wish you Good luck!!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I'm trying to build a dashboard with customize-able functionalities such as adjusting different <div>, dragging and dropping different <div>, adding different <div> and thereby remembering the position where the <div> are being placed. This dashboard is similar to iGoogle's Dashboard.
Question 1) If I'm not wrong, these <div> are called widgets. Are they?
I've gone through the web regarding this, and found most of the tutorials/links for inheriting already built widgets from some external source to your webpage, but this is not what I want. I want to build my own widgets(For eg:- representing some JSON data in pie chart can be one widget and representing the same data in bar graph can be another). So, my next question is :-
Question 2) I'll be having a separate url for letting the user choose widgets according to his needs. So, do I keep the <div> for every widget hidden at the initial time and un-hide them when the user enables them or is there some other way of doing it? PS: There's surely some other way because on going through iGoogle's source code, they add it after the user has enabled that widget. So how is that done?
Question 3) How the placement of <div> can be saved?
Question 1)
Yes, they can be known as widgets. Quite a few Javascript frameworks, such as jQuery UI, include functionality to move elements, snap them to grids etc - http://jqueryui.com/draggable/#snap-to
Question 2)
I would only load the widgets depending on what the user has chosen / is allowed to see, otherwise all widgets would be on the page, just hidden - users could then unhide these widgets, allowing them to see things they might not have access to.
You could load the widgets onto the page in many different ways. One way would be to find out what widgets the user has chosen when the page loads, via server side (PHP etc), and load those widgets in before the user sees the page. Or via Ajax which would allow you to load the page, then the widgets could be added to the page afterwards - this could be useful if you want to animate the widgets onto the page, or if there's a lot of data on the widget which could mean it takes a while to load in.
Question 3)
Using my example in Q1, you could capture the X, Y co-ordinates when the user drops the div, and use Ajax to fire those to the server, then store these co-ordinates against that user's widget. When the user next loads the page, you use these co-ordinates to load the widget into the correct place.