Una página lista elementos, 10 por 10, con un desplazamiento infinito.
Cada elemento tiene un botón "agregar a favoritos", que cuando se presiona llama a la función de devolución de llamada handleClickFavorite, para no volver a procesar los elementos ya procesados.
Pero, cuando se llama a handleClickFavorite, los "datos" no son nuevos... Si tuviera una dependencia de "datos" para handleClickFavorite = useCallback(async (item) => {...}, [user, data]);, "data " será nuevo, pero cada vez que cargo más elementos, todos los elementos se vuelven a generar (tengo un archivo console.log en mi Card PureComponent). Entonces, ¿cómo puedo hacer para usar "datos" nuevos en mi handleClickFavorite sin volver a procesar todos mis elementos, por favor?

 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> ); };