React - Object field as dependency of useMemo-CodePudding

I have the following code:

   const iconMap = useMemo(() => ({
     HomeStacks: {
       iconName: "home",
       iconType: "material-community",
     },
     ActivityStacks: {
       iconName: "bell",
       iconType: "material-community",
       badgeCount: badges["activity"],
     },
   }), [badges["activity"]]);

And, for some reason, ESLint is throwing me an error from the rule "react-hooks/exhaustive-deps":

React Hook useMemo has a missing dependency: 'badges'. Either include it or remove the dependency array. eslintreact-hooks/exhaustive-deps

So, is it not valid to use object fields as dependencies?

CodePudding user response：

It definitely is, but eslint appears to be confused by the bracket notation accessor. In newer versions of react-hooks/exhaustive-deps it is perfectly fine to use dot notation in the dependency list, but for any use cases where it will complain, you can always extract the property to a constant above the dependency list like so (assuming you do not want to suppress the warning):

 const activity = badges["activity"];
 const iconMap = useMemo(() => ({
     HomeStacks: {
       iconName: "home",
       iconType: "material-community",
     },
     ActivityStacks: {
       iconName: "bell",
       iconType: "material-community",
       badgeCount: activity,
     },
   }), [activity]);