Я использую 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 поддерживает объектно-ориентированное программирование.
Вы должны запомнить каждую функцию
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>
);
};