Return value of getSnapshotBeforeUpdate() should be used in a React class component

  • REACT_UNUSED_SNAPSHOT
  • Code Quality
  • Medium
  • react

This rule applies when the getSnapshotBeforeUpdate() lifecycle method is defined but the return value is not used in a React class component.

The return value of getSnapshotBeforeUpdate() is passed as the third snapshot parameter of componentDidUpdate(). It enables capturing up-to-date values right before committing an update to the DOM.

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

In particular, if 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';

export 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';

export 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: Hello: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). This component defines getSnapshotBeforeUpdate() only.

Was this documentation helpful?