FlatListでonEndReachedを使うときの罠

結論

onEndReachedを利用するFlatListがある画面に遷移する場合は、必ず遷移前にストアのリストデータをクリアすること

クリアしないとどうなるか？

LINEのようなメッセージアプリを想像してください。
トーク一覧画面　→　トーク詳細画面　という構造になります。
トーク詳細画面のメッセージがFlatListで作られているという想定です。

<FlatList
  data={ストアのメッセージ}
  inverted
  onEndReached={次のメッセージ10件を取得するコールバック}
  onEndReachedThreshold={0}
  ...
/>

• トーク詳細画面に遷移したときに、直前に見たトーク詳細画面のメッセージが一瞬見える
• その後、遷移先のメッセージが取得され、上書きされる（A）
• ただし、一瞬見える前のメッセージが画面内に収まるほど短い場合、onEndReachedが働く（B）

onEndReachedに次のメッセージを取得するコールバックを仕込んでいると、

1. 一瞬だけ直前に見たトークAのメッセージが見え、
   
2. 正しいメッセージが取得されて表示されたあと、
   
3. 一瞬見えたトークAのメッセージのonEndReachedのコールバックが働き、
4. トークAのメッセージの次のメッセージが表示されてしまう

初投稿！

同じ現象に悩んでいる人に届くといいな

他にうまい方法あったらぜひ使いたいので、react-native玄人の方のアドバイスもお待ちしてます！