When to not use useMemo?

Question

I am using useMemo to much in my Functional Components , and I am worry about it which will it be a good experience to use it to much in our App?

Why I am using it to much?

I have a to much Components which they dont need to be re-rendered except in special circumstances, and this is why I am avoiding them from re-rendering.

Code:

const App = props => {


 const Comp1 = useMemo(()=> <Component1 {...props} a={a} />, [a]);
 const Comp2 = useMemo(()=> <Component2 {...props} b={b} />, [b]);
 const Comp3 = useMemo(()=> <Component3 {...props} c={c} />, [c]);
 const Comp4 = useMemo(()=> <Component4 {...props} d={d} />, [d]);
 const Comp5 = useMemo(()=> <Component5 {...props} e={e} />, [e]);
 const Comp6 = useMemo(()=> <Component6 {...props} f={f} />, [f]);
 const Comp7 = useMemo(()=> <Component7 {...props} g={g} />, [g]);
 const Comp8 = useMemo(()=> <Component8 {...props} h={h} />, [h]);
 const Comp9 = useMemo(()=> <Component9 {...props} i={i} />, [i]);

 return (
   <View>
     {Comp1}
     {Comp2}
     {Comp3}
     {Comp4}
     {Comp5}
     {Comp6}
     {Comp7}
     {Comp8}
     {Comp9}
   </View>
 );
}

There may I have more than 20 Functional Components , and in all them I have the same situations as I am using to much useMemo hooks.

My Question is is this a bad experience which affect bad performance instead of good performance ? or not there is no problem per my conditions.

Answer 1

I would assume that the same general advice applies for React.memo as it does for shouldComponentUpdate and PureComponent: doing comparisons does have a small cost, and there's scenarios where a component would never memoize properly (especially if it makes use of props.children). So, don't just automatically wrap everything everywhere. See how your app behaves in production mode, use React's profiling builds and the DevTools profiler to see where bottlenecks are, and strategically use these tools to optimize parts of the component tree that will actually benefit from these optimizations.