react / react/react-native

VirtualizedList- inefficient function passing for CellRenderer

Open
#20,174 12 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug Component: VirtualizedList Help Wanted :octocat: JavaScript Newer Patch Available Resolution: PR Submitted
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

  • Review the documentation
  • Search for existing issues
  • Use the latest React Native release - using version 0.55.2 did not see any changes to the FlatListComponent since that version.

Environment

Run react-native info in your terminal and paste its contents here.

Environment:
  OS: Windows 10
  Node: 8.11.1
  Yarn: 0.21.3
  npm: 5.8.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Version  3.0.0.0 AI-171.4408382

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: ^0.55.2 => 0.55.4

Description

I used the npm package why-did-you-update to help optimize my components and prevent re-renders. However there is a re-render that I cannot control. This happens for every item in the list. My gues

CellRenderer.props: Changes are in functions only. Possibly avoidable re-render?
Functions before: {onLayout: ƒ}
Functions after: {onLayout: ƒ}

It seems this is caused by an anonymous function at https://github.com/facebook/react-native/blob/d756d94b3a7e2812f17f549c57767ac63734b49c/Libraries/Lists/VirtualizedList.js#L691

I propose that this function be defined on the class to prevent unnecessary re-renders.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The reported callback is in Libraries/Lists/VirtualizedList.js at the linked line. Start there and use why-did-you-update with the described FlatList and CellRenderer case to verify whether the function-only rerender is avoidable. Done means the callback no longer causes those unnecessary CellRenderer rerenders without changing list behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.