eslint-plugin-react-native-performance

ESLint rules for React Native list virtualisation and render performance problems.

Why this exists

Most React Native performance problems need a profiler. A few do not, and those are worth catching in the editor.

This plugin covers the list virtualisation ones: nesting a FlatList inside a ScrollView, rendering a growing collection with .map(), keying rows by array index, and passing new function references to a list on every render. All of these are statically detectable and all of them defeat the windowing that FlatList exists to provide.

Install

npm install --save-dev eslint-plugin-react-native-performance

Requires ESLint 8.40 or later and Node 18 or later.

Usage

Flat config (ESLint 9)

// eslint.config.js
import rnPerf from 'eslint-plugin-react-native-performance'

export default [rnPerf.configs.recommended]

Or wire rules individually:

import rnPerf from 'eslint-plugin-react-native-performance'

export default [
  {
    plugins: { 'rn-perf': rnPerf },
    rules: {
      'rn-perf/no-nested-virtualized-list': 'error',
      'rn-perf/no-index-key-extractor': 'error',
    },
  },
]

Legacy config (.eslintrc)

{
  "plugins": ["rn-perf"],
  "extends": ["plugin:rn-perf/legacy-recommended"]
}

Rules

| Rule | What it catches | | --- | --- | | no-nested-virtualized-list | FlatList inside a ScrollView of the same orientation | | no-scrollview-list | Rendering a collection with .map() inside a ScrollView | | require-key-extractor | Virtualized lists with no keyExtractor | | no-index-key-extractor | keyExtractor returning the array index | | no-inline-list-props | Inline renderItem and component props on lists |

Rules apply to FlatList, SectionList, VirtualizedList and FlashList.

What this plugin does not do

It does not measure anything. These are static rules. They cannot tell you whether a screen is actually slow, how many times a component re-rendered, or what your frame timings look like. Use the React DevTools profiler, Flipper or Hermes sampling for that.

It deliberately overlaps very little with what already exists. eslint-plugin-react-native covers no-inline-styles and no-unused-styles. eslint-plugin-react covers jsx-no-bind and no-array-index-key generically. This plugin covers the list-specific cases those miss, in particular no-index-key-extractor, which react/no-array-index-key does not catch because the index is returned from a function rather than assigned to a key prop.

Some rules are judgement calls, not defects. no-scrollview-list is a suggestion: a .map() over five static items in a ScrollView is fine, which is why allowStaticArrays defaults to true. Disable rules per line where you have measured and are satisfied.

Contributing

Issues and pull requests welcome, particularly false positives with a reproduction.

npm test

License

MIT