1

When working with a dynamic number of components, React asks developers to provide a unique key, lest this error is thrown:

Each child in a list should have a unique "key" prop

Say that each child shows a different icon and label based upon some prop. Does the usage of useMemo here have any impact on performance?

Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114

1 Answers1

1

"useMemo will only recompute the memoized value when one of the dependencies has changed." - from React docs

Given that the elements dependencies (state, props) are still the same and nothing has changed the performance benefit should not be negated.

Smail Galijasevic
  • 773
  • 4
  • 16
  • You meant "should BE neglected"? If the state and the props are the same, `useMemo` doesn't help, right? – Paul Razvan Berg Nov 13 '19 at 20:18
  • @PaulRazvanBerg not sure how you mean that.. let me explain.. when you use useMemo you specify dependencies as the second parameter, only when your component rerenders and some of those dependencies change the value will be recomputed.. this way if a render occurs but none of the dependencies specified changed you will get a memoized value (no recompute) – Smail Galijasevic Nov 13 '19 at 21:23
  • @PaulRazvanBerg Basically it avoids useless re-computations because none of the values that are used in the computation have changed.. the re computation won't occur even tho your component did re-render because some other non relevant state/props changed – Smail Galijasevic Nov 13 '19 at 21:27
  • Thank you Smail for your further explanations, but I was particularly referring to how does `useMemo` behave in relation to the keyed component behaviour, which also performs some component caching/ memoization. – Paul Razvan Berg Nov 13 '19 at 23:45