Recycling
One important thing to understand is how FlashList
works under the hood. When an item gets out of the viewport, instead of being destroyed, the component is re-rendered with a different item
prop. For example, if you make use of useState
in a reused component, you may see state values that were set for that component when it was associated with a different item in the list, and would then need to reset any previously set state when a new item is rendered.
FlashList now comes with useRecyclingState
hook that can reset the state automatically without an additional render.
const MyItem = ({ item }) => {
// value of liked is reset if deps array changes. The hook also accepts a callback to reset anything else if required.
const [liked, setLiked] = useRecyclingState(item.liked, [item.someId], () => {
// callback
});
return (
<Pressable onPress={() => setLiked(true)}>
<Text>{liked}</Text>
</Pressable>
);
};
When optimizing your item component, try to ensure as few things as possible have to be re-rendered and recomputed when recycling.