New rule to avoid prop value with array or object creation in render

[jer-sen]

There is a rule for prop value with function creation (bind, function(...), or arrow function): react/jsx-no-bind
But I can't find a rule for array ([]) or object ({}) creation.

It would be useful since it would help to avoid useless renders of pure components.

[ljharb]

React (and generically, anything in JS) already knows how to optimize comparison of arrays and objects; the hazard doesn't exist.

In other words, passing a new [] every time shouldn't trigger a render in a pure component.

[jer-sen]

React only does a shallow comparison of this.props so a pure component will be rerendered.

Just have a look to this example if you don't believe me: https://jsfiddle.net/69z2wepo/97573/

So what about this new rule ?

[ljharb]

Interesting, I thought PureComponent was smarter than that.

@gaearon is there any chance PureComponent could/should be made a bit smarter, to check one level deeper for arrays and objects?

[gaearon]

I don’t think it’s very likely we’ll change it to do deeper checks. That’s both hard to explain/debug and can be inefficient.

[ljharb]

Thanks, in that case, a rule for this is a great idea.

[alexzherdev]

I'd be happy to take a shot at a new rule for this.
It occurred to me that this could also take an ignoreDOMComponents option à la jsx-no-bind?

[alexzherdev]

While I'm preparing the PR, I could use some suggestions on the name. jsx-no-allocation-in-props? jsx-no-objects-arrays-in-props? @ljharb

[ljharb]

It wouldn't be confined to jsx, and it's specifically dealing with avoiding triggering unnecessary rerenders.

This means that there's no point in ever checking DOM components, since they can never be pure (altho it should still have an ignore option for custom components).

So, for a name: something about avoiding new object (including arrays and functions) creation in props (which includes children) passed to custom components in the render path. I'm not sure what would be a succinct name, but I'll think about it.

[alexzherdev]

Hmm I was thinking of it as an analog to jsx-no-bind which already handles function creation. (I ended up using a lot of code from there) Are you picturing something different?
Also, even with DOM components there's still an issue with excessive GC, right?

[ljharb]

I'm picturing it as a superset of no-bind, that could eventually replace it, that more instructively and correctly deals with the true hazard: excessive rerenders.

GC isn't really the issue in practice.