@pure should be customizable for specific components

[FrancescoCioria]

requirements

@pure currently does a shallow equal for prev/next props object and every first-level prop key.
This is a good and clear default which should be enough for the vast majority of performance issues, nevertheless in some cases we need to expand the shallow-equal check to specific sub-object keys.

ex taken from TextOverflow:

@pure
@props({
  popover: t.maybe(t.Object)
  ...
)}

In this case, as props.popover is an object created in the parent component, its ref will change at every render making @pure completely useless.

For component like TextOverflow which have a heavy render/componentDidUpdate computation we are willing to pay the extra shallow-equal check of props.popover to avoid useless re-renders

specs

TODO (this is a draft)

• @pure should accept arguments
  • one optional settings argument
    • map key/integer where we define a custom depth level for a specific key
    • default is 0 (don't check children keys)
    • if key is not an object ignore it (maybe throw warning?)
      • what about arrays? should we ignore them for now?

misc

{optional: other useful info}