question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getItemLayout performance optimization

See original GitHub issue

This library is the only one that actually just works! Huge thanks @computerjazz

But when list become large (even dozens of items on slow Android device) scrolling become unresponsive, compared to just barebone Flatlist.

I checked source code and noticed that you use measureLayout method for each cell. Flatlist actually have a great solution to speed up cell measuring called getItemLayout. So why not use getItemLayout prop when it specified to speed up measure process? It has length (height) and offset values, probably those values must be enough?

I tested locally and it works great! No more Excessive number of pending callbacks: measureLayout and scrolling now fluid. I only not sure how to properly (in performant manner) get ancestor offset, so I used hardcoded value instead.

Will be great if you have any time to check this! Thanks in advance

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
exentrichcommented, Mar 23, 2021

Absolutely. This library should work for both use-cases (dynamic and fixed sizes). Cells with fixed height are common on mobile. Probably you meet them way often than dynamic. So for my opinion this change will benefit many end users. Also getItemLayout is already known property by React Native developers, so no further explanation is needed about how to use it

1reaction
computerjazzcommented, Mar 22, 2021

getItemLayout only works if you know each item’s height ahead of time and won’t work for dynamic content. Agree we could leverage it for cases where this is known ahead of time but wouldn’t work for everyone.

Read more comments on GitHub >

github_iconTop Results From Across the Web

A guide to optimizing Flatlists in React Native. - Obytes
A guide to analyzing your Flatlist performance, identifying the bottleneck, and fixing common issues.
Read more >
8 ways to optimize React native FlatList performance
5. Use getItemLayout to optimize flatlist react native. Using getItemLayout in FlatList brings some good performance benefits in my experience.
Read more >
React Native: Optimizing FlatList performance
By providing our own getItemLayout function, it won't have to calculate every item's height and the performance will improve.
Read more >
Optimizing Flatlist Configuration - React Native
This can be a big performance boost for the initial render. ... for a horizontal list), providing the getItemLayout prop removes the need ......
Read more >
react native 100+ items flatlist very slow performance
You can also using keyExtractor as an alternative. D. Optional optimization. Try use getItemLayout to skip measurement of dynamic content.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found