Utility for shouldComponentUpdate in React and Preact. Deeply compares props and state to detect changes and avoid unnecessary renders.
Intended for plain data structures such as {} and []. Any other objects are compared by reference: ===, not by structure.
Tiny, dependency-free, single file, native module.
shouldComponentUpdate is critical for the performance of frequently-updated views in React and Preact applications. React claims to implement shallow comparison in PureComponent, but what you really want is a deep comparison, which they don't provide.
As a rule of thumb, traversing data structures is much cheaper than making new ones. The cost of a deep shouldComponentUpdate is neglibible compared to the cost of rendering that it avoids.
Sticking this on all your classes is a no-brainer.
npm i -E react-changeimport {Component} from 'react'
import {shouldComponentUpdate} from 'react-change'
class ViewComponent extends Component {
shouldComponentUpdate() {
return shouldComponentUpdate.apply(this, arguments)
}
}You can stick this in a base class for all your components.
Support equality for Date and URL objects.
Now dependency-free and provided as a native module.
I'm receptive to suggestions. If this library almost satisfies you but needs changes, open an issue or chat me up. Contacts: https://mitranim.com/#contacts