@uplab/should-update
v1.2.1
Published
shouldComponentUpdate without headache 🤕
Downloads
7
Readme
Install
npm i --save @uplab/should-update
Intro
There is a time when a React Developer evolves to a Good React developer and
decides to add shouldComponentUpdate to every component that cannot be PureComponent.
In most cases ones shouldComponentUpdate
function implementation looks similar to this:
class DeathStar extends Component {
shouldComponentUpdate(nextProps) {
return (
this.props.jedi.id !== nextProps.jedi.id ||
this.props.jedi.name !== nextProps.jedi.name ||
this.props.jedi.profile.firstName !== nextProps.jedi.profile.lastName
// ... forevermore
);
}
}
Solution
This package is made to simplify the API for props and state comparison to a single function call.
@uplab/should-update
can deal with nested properties and accepts an array on dependencies that are
presented as a path string (i.e. some.very.deeply.nested.data.and.even.array[0].items
). It can track
not only the props change, but a state changes.
Example usage:
import { createShouldUpdate } from '@uplab/should-update';
class DeathStar extends Component {
state = {
formState: {
firstName: 'Anakin',
lastName: 'Skywalker',
}
}
shouldComponentUpdate: createShouldUpdate({
dependencies: ['jedi.id', 'jedi.name', 'jedi.profile.firstName'],
stateDependencies: ['formState'],
})
}
or
import { shouldUpdate } from '@uplab/should-update';
class DeathStar extends Component {
state = {
formState: {
firstName: 'Anakin',
lastName: 'Skywalker',
}
}
shouldComponentUpdate(nextProps, nextState) {
const dataChanged = shouldUpdate({
dependencies: ['jedi.id', 'jedi.name', 'jedi.profile.firstName'],
stateDependencies: ['formState'],
state: this.state,
props: this.props,
nextProps,
nextState,
});
// some custom stuff with dataChanged
}
}
By default, if the resolved path is a type of object, then the deep comparison happens to check all the nested props.
To avoid this behavior when you have complex and huge objects you can pass shallow: true
prop:
shouldComponentUpdate: createShouldUpdate({ dependencies: ['jedi.profile'], shallow: true, stateDependencies: ['formState'] })
or
shouldUpdate({
dependencies: ['jedi.profile'],
props: this.props,
nextProps,
shallow: true, //defaults to false
stateDependencies: ['formState'],
state: this.state,
nextState,
});
API
shouldUpdate(params)
- @param {array} params.dependencies - array of pathes of the properties to depend on
- @param {object} params.props - component props
- @param {object} params.nextProps - component changed props. Can be previous or next props
- @param {boolean} [params.shallow = false] - if
true
then the function will do shallow comparison. - @param {array} params.stateDependencies - array of pathes of the properties to depend on
- @param {object} params.state - component state
- @param {object} params.nextState - component changed state. Can be previous or next state
Returns true
if the component should update, else false
.
createShouldUpdate(params)
Same as shouldUpdate
, but without params.props
and params.nextProps