I am working on a nextjs/react app building a page that renders a list of items. Each item has a button that opens a Drawer with information regarding this item.
What I did was attaching a Drawer to each item with its own content. This works fine but I am concern about the performance.
My second option which increases the complexity (as I might need to use context) was creating a unique Drawer component that changes its content everytime a different item's button is clicked.
The page will have pagination which means the list won't grow too much so I was wondering if using the second approach will significally improve the performance/size and how this could be measured.
Related
I have written a react component composed of two child components. All three are functional components which utilize hooks.
Think of a visit to Amazon searching for a video card. On the left are filters you might use: resolution, type of connection, number of connections, etc. As you choose filter values the component to the right displays applicable thumbnails for those items matching your selected criteria.
When clicking on one of the thumbnails, the parent and children (filter and thumbnails) windows are replaced with a detail component. The original window is not visible. Hitting the back key, the original components, including the selected filters and thumbnails, should be as before.
However, when hitting the back-key, the original component with its children displays without any of the selected filters.
I am using react v16.11.0 and react-router-dom v5.1.2.
Clearly I am lost. Can anyone suggest an approach?
I used rather than . The router was not recording the transition in history. I was already at the route to which I wished to navigate before hitting the back-key.
I'm making a chat interface in ReactJS, and each item in the chat log displays the same avatar icon over and over again. Currently the problem I'm facing is that when new items are added the chat log, this image blinks in every list item, which does not look very presentable.
I want to know if there is a way to reuse the Component (most probably not) or the bitmap data, so that once loaded in memory, it can be shown more quickly without a perceivable blink. I have tried using data URL, but not to much avail.
Per request in comments further details:
I have a separate Component to show each chat log item. It contains an Image component to show the avatar.
On the top log I'm using a FlatList and in the renderItem I'm rendering the said chat log component. Whenever any message is sent or received it is appended to the array that the data in the FlatList is pointing to.
Whenever an item is added the list gets re-rendered causing the Image to be created again (I have searched but haven't found any good away of appending items to a FlatList without affecting existing children). Therefore I believe the solution lies in making the image load faster so that the re-render is not so perceivable.
One reason I think of the flickering is if you reassign the key of list items and forcing it to re-render. Check if there is any such case. Thats one of the main reasons component to re-render on listviews.
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'm having trouble figuring out the difference between Lists and Menus in Material-UI.
Docs
Lists - https://material-ui-next.com/demos/lists/
Menus - https://material-ui-next.com/demos/menus/
Description
My thinking is that Menus are used for routing and navigation while Lists are used for configuration or static content, but then I saw these quotes:
Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
Reading this, Menus aren't intended to always show, they're designed to be hidden and only shown temporarily.
Menus should not be used as a primary method for navigation within an app.
This makes it seem like a sidebar with a list of navigation elements should be a List. If so, what if I take the same component and want to also use it in a dropdown menu? Do I have to make a separate component using Menu components?
Question
Since the docs are unclear to me, what instances would I want to use Menus vs Lists?
These components follow the Material Design standards, so their intended use would follow the standards.
For Menu:
Menus display a list of choices on a transient sheet of material.
For List:
Lists present multiple line items vertically as a single continuous element.
So while they're similar, I think the key difference is that Menu is intended for a transient selection, presented within something like a Dialog or Modal.
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)