FlatListを使っているときに、再描画のタイミングを理解していなくて20分ぐらい手こずったのでメモ。
(もう二度と理解したつもりになってノリで関数使うのやめよう、、、)
FlatListが再描画されるタイミング
公式のリファレンスに書いてありました。
> By passing extraData={selected} to FlatList we make sure FlatList itself will re-render when the state changes.
extraDataをFlatListに渡すことにより、stateが変化したときにFlatList自体が再レンダリングされます。
extraDataをFlatListに渡すことにより、stateが変化したときにFlatList自体が再レンダリングされます。
> Without setting this prop, FlatList would not know it needs to re-render any items
このpropsを設定しないと、FlatListはアイテムを再レンダリングするタイミングを認識できません。
> because it is a PureComponent and the prop comparison will not show any changes.
これは、PureComponentであり、propsの比較で変更が表示されないためです。
←ここまだなぞ
引用元
https://reactnative.dev/docs/flatlist
つまり、dataに渡した値が変化しても再レンダリングの必要があると認識されないから、再レンダリングが必要な場合には、extraDataを設定しておいて、そっちを変更してくれとのことのようです。
再レンダリングが必要じゃないパターンももちろんあるだろうけれど、再描画しすぎて困るようなこともないので設定しておいたほうがぶなんぽいですな。
コメント