This is my parent component:
const A = () => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const isFetching = useRef(false);
...
const fetchMoreData = async () => {
if(isFetching.current) return;
isFetching.current = true;
setIsLoading(true);
try {
const newData = await ...
setData([...data, ...newData]);
}
catch(err) {
...
}
setIsLoading(false);
isFetching.current = false;
}
...
return <B data={data} isLoading={isLoading} onEndReached={fetchMoreData} />
}
And I am trying to memoize my child component B, to avoid unnecessary re-renders. Currently, I am doing the following:
const B = memo(({ data, isLoading, onEndReached }) => {
...
return (
<FlatList
data={data}
isLoading={isLoading}
onEndReached={onEndReached}
/>
);
},
(prevProps, nextProps) => {
return JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data) &&
prevProps.isLoading === nextProps.isLoading;
});
But, I think, that my memoization can cause problems... as I am not adding prevProps.onEndReached === nextProps.onEndReached
But... all works fine :/ Btw I suppose that there can be a little chance to see unexpected things happening because of not adding it. What do you think? Is it necessary to add methods in the areEqual method?