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