Computed properties

One thing I’ve wanted a couple of times in React is having computed properties, something vaguely like Ember’s computed properties:

fullName: function() {
    var firstName = this.get('firstName');
    var lastName = this.get('lastName');

    return firstName + ' ' + lastName;
}.property('firstName', 'lastName')

In my app one case where this would be useful is where one prop is a string that gets parsed into a more elaborate object before being displayed. Currently I’m doing the parsing in componentWillMount and componentWillReceiveProps and then setting state, which works pretty well, but perhaps there’s a nicer way we can provide.

[zpao]

@andreypopp I do too. The only downside is that we’ll re-evaluate that function even if this.props.firstName & this.props.lastName don’t change. If that function is doing something more complex than just string concat, it could get expensive. The upside of computed properties is that you can expire values when you know the dependents change. The downside is observing changes and expiring caches.

Generally we would suggest what @sophiebits is doing, though the fact that there’s no single lifecycle method to catch both initial props and update is annoying.

[andreypopp]

I use regular functions for this with dependencies from props or state

fullName: function() {
    var firstName = this.props.firstName;
    var lastName = this.props.lastName;

    return firstName + ' ' + lastName;
}

when props or state changes fullName reevaluated if it’s called from render() and UI is updated.