You’ve got things a bit confused here:
- You should *never* mutate arrays in React, regardless of whether or not you’re using PureComponent.
- Shallow comparisons of arrays versus simple comparisons of primitive types do not have a noticeable performance difference as far as I’m aware.
- If you are passing a large number of props and therefore having to shallow compare a large number of values, and it is the case that your business logic dictates that the component in question’s
shouldComponentUpdatewill almost always return
truewhen called, and you call this quite frequently, then you potentially are slowing down your app by using
PureComponenthere. This has been proven with real benchmarks in real apps by Ryan Florence.
PureComponentis only an optimization if the time it takes to perform a shallow comparison outweighs the time it takes to re-render in those cases where it could have been avoided. If you rarely avoid re-rendering, then
PureComponentdoesn’t get to shine and you are just performing lots of extra computations.