Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Measuring items of a list #444

Open
guvenkaranfil opened this issue Jan 14, 2024 · 3 comments
Open

[FEATURE] Measuring items of a list #444

guvenkaranfil opened this issue Jan 14, 2024 · 3 comments

Comments

@guvenkaranfil
Copy link

guvenkaranfil commented Jan 14, 2024

Is your feature request related to a problem? Please describe.
Yes, I want to be able to measure items of my list. For example, I have a MenuList component which creates the list (FlatList) and rendering the MenuItem(Custom Component). I would love to measure that my list performing well perspective of not re-rendering unnecessarily etc.

Describe the solution you'd like
Get measure metrics like I get a parent component (in this case MenuList)

Describe alternatives you've considered
A alternative solution for render count would be passing a function like onRenderItem though list to item and mock the function in test and assert the call count.

Additional context
Above alternative solution can be found here

I have created a repository for showing the use case I mentioned above. The repository can be found here

@mdjastrzebski
Copy link
Member

Not sure I understand your issue? Do you want to measure individual items on your list instead of the whole list?

If so, the simplest way would be to write a perf tests that just renders a list member (not the whole list).

@guvenkaranfil
Copy link
Author

Yes I could write a test to measure of list item individually. But I would like to measure how does it performs on composition.
Because I think it might change measuring item itself separately comparing to measuring in a list.

`interface IListItemProps {
isDisabled: boolean;
title: string;
}

const ListItem = ({isDisabled, title}: IListItemProps) => {
return (

{title}

);
};`

Imagine I have a component like this. My very first wondering is
How would I write a test to gather information about rendering count to make sure items of list is not re-rendering unnecessarily?

Because on the list component I might need update some states for several reasons that might not effecting the list.

@mdjastrzebski
Copy link
Member

Not sure what do you mean "how does it performs on composition", could you clarify.

From my perspective, by measuring whole list component, then you get a sum of list items + list container components. And by measure list item, you would get only list item. The performance of list items themselves should be the same if you measure them individually vs if you would measure them as "sub-components".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants