Add option to ignore specified props in shallowCompare

[fredrikolovsson]

[feature request/question]
Consider a component that has a stateless functional component (SFC) as prop, e.g. like this:

<MyComponent component={(props) => <div>{props.title}</div>;} />

Using shallowCompare in shouldComponentUpdate of MyComponent would always return true, but there are cases when it makes sense to use shallowCompare on all props except those with SFCs, like in this issue in redux-form, which had this solution:

shouldComponentUpdate(nextProps) {
  const propsWithoutComponent = { ...this.props }
  const nextPropsWithoutComponent = { ...nextProps }
  delete propsWithoutComponent.component
  delete nextPropsWithoutComponent.component
  return shallowCompare({ props: propsWithoutComponent }, nextPropsWithoutComponent)
}

While I have no idea how common this pattern is or will be, I saw that context is about to be added to shallowCompare and I thought maybe it would be possible to add an option to make shallowCompare ignore one or several props?

E.g. the signature could be like this instead:

function shallowCompare(instance, { nextProps, nextState, nextContext, propsToIgnore })

where propsToIgnore could be an array of string keys. (To avoid a breaking change, propsToIgnore could of course be added as the fifth argument instead, but this seems more robust to me.)

If this makes sense to you, I could have a go at a PR for this.

[zpao]

shallowCompare is not really meant to be super intelligent but a cover 80% of the cases. The problem you're calling out is function identity and it's also been a problem with event handlers and callback refs. But we don't have any intent to support that out of the box and it really muddies the API to add things like this (why not add it to context and state as well?). If you want something like this, feel free to fork shallowCompare.

Another solution is to write your code differently. Remember that you are creating a newly bound function that the VM needs to track scope for on every render pass when you use arrow functions like that. If you did something like this:

const Component = (props) => <div>{props.title}</div>;
...
render() {
  return <MyComponent component={Component} />

Then you would maintain identity and it would work fine with shallowCompare

[fredrikolovsson]

Thanks for the feedback, I understand your considerations!