'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