Return value of getSnapshotBeforeUpdate() should be used

  • REACT_UNUSED_SNAPSHOT
  • Code Quality
  • Medium
  • react

This rule applies when getSnapshotBeforeUpdate() lifecycle method is defined but the return value is not used.

getSnapshotBeforeUpdate() was added in React v16.3 and its return value is passed as the third parameter(snapshot) of componentDidUpdate(). It enables capturing up-to-date values right before committing an update to the DOM.

Therefore, getSnapshotBeforeUpdate() becomes meaningless if the parameter(snapshot) is not used in componentDidUpdate(), and it could be unintended.

When getSnapshotBeforeUpdate() is defined without a componentDidUpdate() definition, React outputs a warning message.

Noncompliant Code Example

View with compliant examples side by side
import React from 'react';

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = { msg: 'hi' };
        this.handleClick = this.handleClick.bind(this);
        this.helloRef = React.createRef();
    }
    getSnapshotBeforeUpdate(prevProps, prevState) { // REACT_UNUSED_SNAPSHOT alarm because 'componentDidUpdate()' definition is missing.
        if (prevState.msg !== this.state.msg) {
            const hello = this.helloRef.current;
            return hello.offsetLeft;
        }
        return null;
    }
    handleClick() {
        if (this.state.msg === 'hi') {
            this.setState({ msg: 'bye' });
        } else {
            this.setState({ msg: 'hi' });
        }
    }
    render() {
        return <div ref={this.helloRef} onClick={this.handleClick} style={{ position: "absolute" }}>{this.state.msg}</div>;
    }
}

Compliant Code Example

View with noncompliant examples side by side
import React from 'react';

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = { msg: 'hi' };
        this.handleClick = this.handleClick.bind(this);
        this.helloRef = React.createRef();
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        if (prevState.msg !== this.state.msg) {
            const hello = this.helloRef.current;
            return hello.offsetLeft;
        }
        return null;
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        if (snapshot !== null) {
            this.helloRef.current.style.left = (snapshot + 10) + "px";
        }
    }
    handleClick() {
        if (this.state.msg === 'hi') {
            this.setState({ msg: 'bye' });
        } else {
            this.setState({ msg: 'hi' });
        }
    }
    render() {
        return <div ref={this.helloRef} onClick={this.handleClick} style={{ position: "absolute" }}>{this.state.msg}</div>;
    }
}

Version

This rule was introduced in DeepScan 1.13.0-beta.

See

  • getSnapshotBeforeUpdate()

  • React Warning: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). This component defines getSnapshotBeforeUpdate() only.