react-native-macos: Dubious performance of FlatList with only 500 items and 1 element in each

Environment

react-native -v:
% react-native -v 
zsh: command not found: react-native
% npx react-native -v
error: unknown option `-v'


npm ls react-native-macos:
% npm ls react-native-macos
superpower@0.0.1 /Users/alex/dev/superpower
└── react-native-macos@0.64.28

node -v:
% node -v
v16.14.0

npm -v:
% npm -v
8.3.1

yarn --version:
% yarn --version
zsh: command not found: yarn

xcodebuild -version:
% xcodebuild -version 
Xcode 13.2.1
Build version 13C100

Steps to reproduce the bug

const data = Array.from({length: 500}, (_, i) => ({
  id: i,
  text: `This is another item with index ${i}`,
}));

function App() {
  return (
    <FlatList
      ItemSeparatorComponent={() => <View style={{height: 2}}></View>}
      data={data}
      renderItem={({item}) => <Text>{item.text}</Text>}
    />
  );
}

Running this with npm run macos and scrolling through the list frequently stutters and shows blank temporarily while views are rendered. This is on a 2018 MacBook Pro. In my real application the item views are a fair bit more complex so this test case demonstrates the problem to a lesser extent than I am experiencing.

Expected Behavior

Smoother scrolling

Actual Behavior

Stuttered rendering while scrolling.

Reproducible Demo

I can provide this if need be, possibly I’m just doing something obviously wrong.

Additional context

I’m not aware of any way to run a react-native-macos app in production mode. AFAIUI React does a lot of sanity checking when running in dev mode, and maybe this is part of the problem…

Thanks!