Performance optimizations

[aduth]

Performance optimizations

[Natim]

Thank you for this report 👍

[n1k0]

If we want to properly implement shouldComponentUpdate, we'll have to rely on some immutable library like Immutable.js, which was something I tried to avoid.

But I agree the impact on performances on lower end machines might get really important, so we should do this upgrade.

(And yeah, kudos for the super clean and useful report.)

[aduth]

If we want to properly implement shouldComponentUpdate, we'll have to rely on some immutable library

Again, pardon my ignorance of the codebase and whether these suggestions have already been considered, but it's quite possible to perform shallow comparison (i.e. pure render) even with plain object properties, so long as you're careful not to mutate the original when updating.

Object.assign( {}, original, { input: 'New Value' } );

Or, for deeply nested objects, consider pulling in lodash.merge (available as standalone package):

merge( {}, original, { foo: { bar: { input: 'New Value' } } } );

[n1k0]

The problem is not with copying/merging deeply nested objects, it's with comparing them to know if they've changed.

({a: 1, b: {c: 2}}) === ({a: 1, b: {c: 2}}) // false

And shouldComponentUpdate needs to return a boolean to trigger a render when things have changed. So we need immutable data structures which don't carry identity as plain js objects do, so we can safely compare them and return the appropriate boolean value there.

Am I missing something obvious? I didn't have my first coffee of the day just yet.

[leplatrem]

Does this affect the demo only or the form rendering itself?

[aduth]

@leplatrem : I'm observing it in my own usage as well, but the demo was the easiest way for me to illustrate the problem.

[magopian]

It may be related to kinto-admin, but when viewing a page with a few hundred records (for the blocklist), the page is very laggy, unresponsive, and even freezes for a couple of seconds at the beginning.

[aduth]

Might be compounded with the fact that JSON schema validation is performed on every change:

https://github.com/mozilla-services/react-jsonschema-form/blob/afcb38e/src/components/Form.js#L51

[n1k0]

This is probably the very first thing to investigate as a solution https://facebook.github.io/react/docs/shallow-compare.html