Skip to content

Instantly share code, notes, and snippets.

@Buggytheclown
Created September 15, 2019 09:17
Show Gist options
  • Save Buggytheclown/2f6838bbf35ff4e8083c1a3248d46375 to your computer and use it in GitHub Desktop.
Save Buggytheclown/2f6838bbf35ff4e8083c1a3248d46375 to your computer and use it in GitHub Desktop.
a few way to get memoized value
class A extends Component<Props> {
sumMemoized = memoizeLast((a, b) => a + b);
computedAliasForOtherProp = memoizeLast(props => props.field.deep.nested);
get aliasForOtherProp() {
return this.computedAliasForOtherProp(props);
}
get result() {
return this.sumMemoized(this.props.a, this.aliasForOtherProp);
}
render() {
return (
<span>
{this.props.a} + {this.aliasForOtherProp} = {this.result}
</span>
);
}
}
class A2 extends Component<Props> {
@ComputedFrom('props.field')
get aliasForOtherProp() {
return props.field.deep.nested;
}
@ComputedFrom('props.a', 'aliasForOtherProp')
get result() {
return this.props.a + this.aliasForOtherProp;
}
render() {
return (
<span>
{this.props.a} + {this.aliasForOtherProp} = {this.result}
</span>
);
}
}
function A3() {
const aliasForOtherProp = useMemo(() => this.props.field.deep.nested, [
this.props.field,
]);
const result = useMemo(() => this.props.a + this.aliasForOtherProp, [
this.props.a,
this.aliasForOtherProp,
]);
return (
<span>
{this.props.a} + {aliasForOtherProp} = {result}
</span>
);
}
class A4 extends Component<Props> {
render() {
return (
<span>
{this.props.a} + {this.props.computed.aliasForOtherProp} =
{this.props.computed.result}
</span>
);
}
}
const A4plus = withComputed(
{
computed: function aliasForOtherProp(field) {
return field.deep.nested;
},
deps: [(props: Props) => props.field],
},
{
computed: function result(a, aliasForOtherProp) {
return a + aliasForOtherProp;
},
deps: [
(props: Props) => props.a,
(_, computed) => computed.aliasForOtherProp,
],
}
)(A4);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment