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