Как использовать useCallback с функцией каррирования в React?

Я использую useCallback для запоминания моей функции обратного вызова, но, похоже, она не работает с функцией каррирования, мой компонент PhotoItem всегда перерисовывается при повторном рендеринге MyListPhoto, хотя я оборачиваю свой PhotoItem в React.memo(). Поскольку функция handleDelete является каррирующей, есть ли способ использовать ее с useCallback?

const MyListPhoto = () => {
   ...other state...
   const { delete } = useDeletePhoto();

   // always create new function when component re-render
   const handleDelete = useCallback((index) => (photoId) => {
      delete(photoId, index)
   }, []);

   return (
     <ul>
        {photos.map((photo, index) => (
           <PhotoItem
              key = {photo.id}
              photo = {photo}
              onDelete = {handleDelete(index)}
           />
        ))}
     </ul>
   )
}

Компонент PhotoItem:

const PhotoItem = React.memo(({ photo, onDelete }) => {
    console.info('re-render');

    return (
      ...
    )
})

🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.


2
56
2

Ответы:

Решено

Вы должны запомнить каждую функцию

const MyListPhoto = () => {
  // ...other state...
  const { del } = useDeletePhoto();

  const deleteHandlers = useMemo(() => {
    return photos.map((photo, index) => (photoId) => del(photoId, index));
  }, [photos]);

  return (
    <ul>
      {photos.map((photo, index) => (
        <PhotoItem
          key = {photo.id}
          photo = {photo}
          onDelete = {deleteHandlers[index]}
        />
      ))}
    </ul>
  );
};

Извините, я не понял сути! Зачем нужно запоминать функцию? как насчет этого:

...
return <ul>
        {photos.map((photo, index) => (
           <PhotoItem key = {photo.id} photo = {photo} onDelete = {() => delete(photo.id, index)}  />
     </ul>
   )