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