Component life cycle methods

There are a couple of tricks I want to show you before we wrap up. The first is a life cycle method we can use to tell when a component's properties will change. We can use this to change the appearance of a component, or refresh the internal state.

We can add this method to PageEditor, for example:

class PageEditor extends Component {
    constructor(props) {
        super(props);

        this.state = {
            "changed": false
        };

        this.bind(
            "onCancel",
            "onUpdate"
        );
    }

    isChanged(next, previous) {
 return JSON.stringify(next) !== JSON.stringify(previous)
 }

 componentWillReceiveProps(props) {
 this.setState({
 "changed": this.isChanged(props, this.props)
 });
 }

    render() {
        return <p>
            <input
                type="text"
                name="title"
                value={this.props.title}
                onChange={this.onUpdate}
                />
            <textarea
                name="body"
                value={this.props.body}
                onChange={this.onUpdate}>
            </textarea>
            <button
                onClick={this.onCancel}>
                cancel
            </button>
        </p>;
    }

    onUpdate() {
        this.props.onUpdate(
            this.props.id,
            event.target.name,
            event.target.value
        );
    }

 onCancel(event) {
 event.preventDefault();
 this.props.onCancel();
 }
}

We can now tell when the page changes, even though the changes are immediately propagated.

Another magic method we can use will help cut down on the comparisons React needs to perform. It's called shouldComponentUpdate and we can add it to PageView:

class PageView extends Component {
    constructor(props) {
        super(props);

        this.bind(
            "onDelete"
        );
    }

    isChanged(next, previous) {
 return JSON.stringify(next) !== JSON.stringify(previous)
 }
 
 shouldComponentUpdate(props, state) {
 return this.isChanged(props, this.props);
 }

    render() {
        return <p>
            {this.props.title}
            <button
                onClick={this.props.onEdit}
                >edit</button>
            <button
                onClick={this.onDelete}
                >delete</button>
        </p>;
    }

    onDelete() {
        this.props.onDelete(
            this.props.id
        );
    }
}

The shouldComponentUpdate method gives us a way to tell React not to look for changes in this component. At this scale, we're not likely to see huge performance improvements. But when we add this method to more complex layouts, it will drastically reduce the amount of work required to work out how the document should change.

We'll be using these tricks later, as we build more complex content management features.