useCallback dependencies for array of items

Question

I have a list of cards. When I add them to favourites by pressing a button, it changes the color of that button. However, I just want that particular card to re-render after adding to favourites.

const addFavouriteHandler = useCallback((id: number) => {
   dispatch(addFav(id));
}, [ ?? ])

// This is my card in the list
<MovieCard
   key={movie.id}
   movie={movie}
   addFavourite={addFavouriteHandler}
   removeFavourite={removeFavouriteHandler}
   isFavourite={isFavourite}
/>

What would be the dependencies of the useCallback here?

I think Giovani has the answer below, but you should highly consider adding the React hooks eslint plugin to your project as it will flag this and inform you what is missing. — Drew Reese
– Drew Reese, Commented Sep 3, 2021 at 7:06

Giovanni Esposito · Accepted Answer · 2021-09-03 07:02:04Z

1

Most probably you got a warning on missing dependency for dispatch function, so your useCallback would be:

const addFavouriteHandler = useCallback((id: number) => {
   dispatch(addFav(id));
}, [dispatch]);

The real problem is that I don't think you need a custom hook in this case, just write:

const addFavouriteHandler = (id: number) => {
   dispatch(addFav(id));
};

Then, if you want to render MovieCard after you added it to favourites, if isFavourite is something like:

isFavourite = arrayOfFavourites.includes(movie.id)

where arrayOfFavourites is the array filled by dispatch(addFav(id));, then your MovieCard will be for sure re-rendered because now card id is on arrayOfFavourites.

answered Sep 3, 2021 at 7:02

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lokesh Bajracharya Over a year ago

Thanks for pointing out, but is there a way to re-render only that card from where the onClick was triggered?

Giovanni Esposito Over a year ago

@LokeshBajracharya its just necessary to connect the MovieCard state to something that will change when you add the card to favourites. I think in MovieCard you have something on html that is connected to isFavourite prop (an icon on card that means that card is a favourite card). In this case, card will be re-rendered. Is my assumption on MovieCard wrong?

Collectives™ on Stack Overflow

useCallback dependencies for array of items

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related