react-deep-equal-update
v1.0.2
Published
A decorator that uses deep-equal to determine if a component should be re-render.
Downloads
3
Maintainers
Readme
@updateWhenNotDeepEqual
A decorator that uses deep-equal to determine if a component should be re-render.
How it works?
Note: This documentation contains TypeScript examples but you should be able to use this library with Babel as well.
Imagine that the props of a component have the following interface:
interface TestProps {
id: number;
subprop1: {
subprop11: {
subprop111: {
value: string;
},
subprop112?: {
value: string;
}
},
subprop12?: {
subprop121: {
value: string;
},
subprop122?: {
value: string;
}
};
};
}
If we want to re-render the component only when its properties
change we would need to use a deep-equality check (or immutables)
and implement the shouldComponentUpdate
method.
By default,
shouldComponentUpdate
always returnstrue
to prevent subtle bugs when state is mutated in place, but if you are careful to always treat state as immutable and to read only from props and state inrender()
then you can overrideshouldComponentUpdate
with an implementation that compares the old props and state to their replacements.
This small module helps you to achieve that using a decorator named
updateWhenNotDeepEqual
:
Working with properties
import * as React from "react";
import updateWhenNotDeepEqual from "../src/decorator";
@updateWhenNotDeepEqual()
class TestComponent extends React.Component<TestProps, void> {
constructor(props: TestProps) {
super(props);
}
public render() {
return (<div></div>);
}
}
Working with direct sub-properties
If you just want to re-render the component when one of its direct sub-properties has been updated you can pass the name od the sup-property to the decorator:
@updateWhenNotDeepEqual("subprop12")
class TestComponent extends React.Component<TestProps, void> {
constructor(props: TestProps) {
super(props);
}
public render() {
return (<div></div>);
}
}
Working with deep sub-properties
Finally, if you just want to re-render the component when one of its deep sub-properties has been updated you can pass the name od the sup-property to the decorator:
@updateWhenNotDeepEqual((props: TestProps) => { return props.subprop1.subprop12.subprop121; })
class TestComponent extends React.Component<TestProps, void> {
constructor(props: TestProps) {
super(props);
}
public render() {
return (<div></div>);
}
}
Note: The
updateWhenNotDeepEqual
decorator asumes that your components have properties and NO STATE the implementation ofshouldComponentUpdate
ignores the component's state.