'Not rerender not modified items when using useCallback function
A page list items, 10 by 10, with an infinite scroll.
Each item has a button "add to favorite", which when is pressed called the callback function handleClickFavorite, in order to not rerender items already rendered.
But, when handleClickFavorite is called, "data" are not fresh... If I had "data" dependency to handleClickFavorite = useCallback(async (item) => {...}, [user, data]);, "data" will be fresh, but each time I load more items, all items are rerended (I have a console.log into my Card PureComponent). So, how How can I do to use a fresh "data" in my handleClickFavorite without rerendered all my items please ?
const Home = () => {
const [user, setUser] = useState({ email: null, auth: false, favorites: [] });
const [data, setData] = useState([]);
const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
const config = useRef({
page: 0,
});
const loadData = (ev) => {
setInfiniteDisabled(true);
config.current.page += 1;
service.findAll(config.current.page).then(res => {
setData([
...data,
...res['items']
]);
});
}
useIonViewWillEnter(() => {
console.log('useIonViewWillEnter');
loadData();
});
const handleClickFavorite = useCallback(async (item) => {
if (user.auth) {
user.favorites.push(item.id);
setUser(user);
const datas = [...data];
for (let k in datas) {
if (datas[k].id === item.id) {
datas[k].rated = !datas[k].rated;
}
}
setData(datas);
} else {
// show login modal
}
}, [user]);
return (
<IonPage>
<IonContent fullscreen>
<IonList>
{data.map((item, index) => {
return <Card key={'card' + item.id} details={item} onClickFavorite={handleClickFavorite} />
})}
</IonList>
<IonInfiniteScroll
onIonInfinite={loadData}
threshold="100px"
disabled={isInfiniteDisabled}
>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data..."
></IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
</IonPage>
);
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
